HTML5中video标签的小技巧

1. 低版本webview中事件不触发的问题

在低版本的webview中如果我们使用video的on媒介事件，如onplay,onended,onwaiting等等，这些事件可能会触发不了；

var video = document.getElementById('video');

video.onplay = function(){
};
video.onended = function()  
};
video.onwaiting = function(){   
};
video.ontimeupdate = function(){    
};

其实解决很简单，就是把on事件改成addEventListener事件

var video = document.getElementById('video');

video.addEventListener('play', function(){

});
video.addEventListener('ended', function(){

});
video.addEventListener('waiting', function(){

});
video.addEventListener('timeupdate', function(){

});

2. 如何隐藏video的controls
给video元素添加一个伪类选择器即可

video::-webkit-media-controls {
  display:none !important;
}

3. 低版本webview中poster属性无效，无法显示封面的解决方案

<video src="/video/video.mp4" poster="/images/poster.png" >
</video> 

低版本webview中即使设置类poster属性，但是也可能显示不了封面，解决办法可以设置一个div，然后把封闭作为背景图片即就可代替默认的封面显示，最后每次在点击视频播放的时候，把这个div添加hide样式隐藏即可达到效果

<div class="video-wrapper">
    <div class="poster"></div>
    <video src="/video/video.mp4" poster="/images/poster.png" ></video> 
</div>