video 播放

使用标签 实现视频播放 及 共享视频地址

本文链接 ： https://mp.csdn.net/mdeditor/100987341 转载请注明出处

由于 Chrome 65之后不支持有声视频自动播放，为了适应浏览器内核较低的机顶盒，能够使用video标签实现自动播放的效果，进行测试。
主要注意以下几点：
注：下文中 video 为 document.getElementById 获取到的 DOM 节点；
通过 navigator.userAgent 打印浏览器的内核版本；

1. 在 Chrome 65 之后的版本中不在支持有声视频自动播放，可以设置静音 muted播放静音视频；使用 up 键取消静音 video.muted = false，并将初始音量设置为0 video.volume = 0；
2. 通过键盘或是鼠标进行触发，设置 video.play() 来实现播放、使用 video.pause() 实现暂停；通过获取 video.paused 的值查看是否处于播放状态， true 为暂停，false 为播放；
3. 通过定时查询（setInterval) 查询 video 的 readyState 视频就绪状态，
   0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
   1 = HAVE_METADATA - 关于音频/视频就绪的元数据
   2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
   3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
   4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放<