video 播放

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

本文链接 ： https://mp.youkuaiyun.com/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 - 可用数据足以开始播放
   当 readyState == 4, 视频已准备就绪，此时开始 autoplay 播放视频；如果 autoplay 无法播放，可以使用 .play() 播放视频，紧跟着查看 video.paused 查看视频是否播放；
4. 当没有在页面上进行任何形式的触发之前，video 不支持进入页面立即 .play();
5. 可以尝试通过给 video 标签设置 poster = ‘url’ 规定视频播放之前显示的图像；可以使用延时（setTimeout） 播放，给视频留出缓冲时间；
6. 可以通过动态添加 静音muted 实现播放；在 .play() 之前设置 video.muted = true, .play()之后视频开始播放，此时将 video.muted = false; 由此来动态控制静音；

附：测试用视频链接
Apple官方宣传视频 “https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4”

开源3D动画 大雄兔
http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_2160p_60fps_stereo_abl.mp4
http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_native_60fps_stereo_abl.mp4