h5+js如何实现视频播放？简单视频播放器控件的制作-

由于h5兼容性问题，很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整，谷歌则支持的不是很好，很多功能都不能实现，这就需要我们去自制一个播放界面，去兼容不同的浏览器。

只插入一个视频时，浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件；

autoplay--自动播放；

controls--显示音乐控件；

loop--实现循环播放；

poster--视频加载未开始时播放的图片；

3、video支持多视频格式：（以此解决不同浏览器对视频格式的兼容问题）

4、获取当前视频播放的状态：

playbtn(对象).Onclick=function(){
　　　if(video.paused){
　　　  video.play();　　
　　　}else{
　　　　video.pause();
　　　}
}

5、视频的一些特殊事件：

1）当视频可以播放获取总时间：

vdideo.Oncanplay=function(){
　　　console.log(video.duration);
}

2）视频播放时，获取实时时间：

video.Ontimedate=function(){
　　console.log(video.currentTime);
}

3）视频结束：

video.Onended=function(){
}

实现后的样式：

代码如下：

    
        
        
        
    
    
        

            
            

                
                
                00:00:00
                /
                00:00:00
                
            
        
        
    

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注 第一PHP社区 相关教程栏目！！！

以上就是h5+js如何实现视频播放？简单视频播放器控件的制作的详细内容，更多请关注 第一PHP社区 其它相关文章！