html5 video的简单使用

h5的video标签省去了调用插件，UI能根据环境自动调整，方便快捷。但问题在于文档太难看。各种花里胡哨的video插件其实用起来也挺麻烦，bug不少，费半天劲最后发现甚至不如手写一个来的方便。

仅介绍H5 video标签最基本的使用

demo：

<video src="xxx.video" controls="controls" controlslist="nodownload" disablePictureInPicture="true"
	width="100%" height="240" poster="xxx.jpg" x5-video-player-type="h5">
</video>

• x5-video-player-type=“h5”：启动H5播放
• controlslist=“nodownload”：去掉下载按钮
• controlslist=“nofullscreen”：去掉全屏按钮
• disablePictureInPicture=“true”：隐藏“画中画”

// 隐藏全屏按钮
video::-webkit-media-controls-fullscreen-button {
    display: none;
    z-index: -1;
}

画中画、全屏控件在页内播放时存在很多bug：

全部隐藏后清爽了很多

属性与事件：
这方面文章很多
https://www.runoob.com/tags/ref-av-dom.html
https://www.jb51.net/html5/680459.html

video选择器：

//jQuery
var myVideo = $("#id").get(0)
var myVideo = $("video").get(0)
//DOM
var myVideo = document.getElementById("id")
var myVideos = document.getElementsByTagName("video")

实用属性：

myVideo.paused; //返回布尔值，判断视频是否暂停
myVideo.currentTime; //返回当前播放时间
myVideo.currentTime(sec); //设置当前播放时间

常用事件：

myVideo.addEventListener('play',function(e){})
myVideo.addEventListener('pause',function(e){})
myVideo.addEventListener('timeupdate',function(e){})
//Internet Explorer 8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。
myVideo.onended = function(){}

最后，还可以打印查看有哪些被忽视的属性及方法