用html5的视频元素所遇到的第一个坑

时间:2021-11-12 07:33:29

html5 有一个video标签,这个是被大家所熟知的事情。按照w3c的规范,我认真的写出如下代码:

            <video preload="auto" controls="true" width="100%" height="100%">
<source src="t.mp4" type="video/mp4">
        your browser does not support the video tag....
</video>
        var video = document.querySelector('video');
video.addEventListener('error',function(){
alert('error');
   // close the video player
}); video.play();

然后悄悄地拿出我私藏的小电影去播放,都没有问题。于是满心欢喜的用在了项目中。直到有一天,测试部的同事跑来告诉我说,有一段视频播放不出来,播放界面又关不掉。我

急忙要来apk进行检查。发现是里边有一个mp4文件格式有问题,而代码又没有捕获到这个错误。这时我就纳闷了,我明明写了error事件,为什么没有触发呢,难道没有这个事件吗

于是急忙google,发现是有这个事件的。经过仔细的对比,我发现,通过source指定视频文件的时候,error触发不到。改成下面这样,就捕获到了:

<video src="t.mp4" preload="auto" controls="true" width="100%" height="100%"></video>

虽然是之前没有测试失败情况,才导致今天的问题,但是不能不说这是video元素的一个坑。如果不改dom结构,我尝试了一下,在source上邦定error事件,也是可以捕获到错误的。

video.querySelector('source').addEventListener('error',function(){
alert('error');
});

以后用这个元素的时候,就要小心了。鉴于存在以上原因,我认为在video元素里直接指定src是值得推荐的写法。