网页端 H5 - video 视频播放优化

对于在安卓手机上 poster属性展示封面图的兼容问题，可以在视频上层加一个div图片，视频播放是显示video，隐藏该图片即可。

1、属性

preload = "auto"   是否预加载数据
值：
auto   - 页面加载后载入整个数据
meta - 页面加载后载入数据
none - 不载入视频 

autoplay  - 如果出现该属性，则视频在就绪后马上播放
controls  - 如果出现该属性，则向用户显示控件，比如播放按钮。

/* 隐藏控制条 */
::-webkit-media-controls{
    opacity: 0;
    cursor: pointer;
}

---

2、视频暂停

这里主要运用到了play() ；pause()这两个事件。

/* 点击视频时 暂停/开始 */
    var video1=document.getElementById("video");
    video1.onclick=function(){
        if(video1.paused){
            video1.play();
        }else{
            video1.pause();
        }
    }
	/* 点击图标后视频 暂停/开始 */
    var video2=document.getElementById("videoPlay1");
    var video3=document.getElementById("video");
    video2.onclick=function(){
        if(video3.paused){
            video3.play();
        }else{
            video3.pause();
        }
    }
    /* 点击视频后图标 隐藏/显示 */
    $(function() {
        $(".m-video-header .swiper-slide").click(function(){
            $("#videoPlay1").toggle();
        });

    })

大致结构：

参考文献：
赵达-腾讯全栈开发工程师
video.js