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

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是值得推荐的写法。