HTML5视频播放 video标签最佳实践

[pokerLife]

PS：最近写移动端碰到了视频播放，之前只是简单的学习了一下，但没想到坑这么多，所以专门花时间研究了一下，把这段时间学到的总结出来以供参考：

HTML

video属性

<video
  id="video" 
  src="video.mp4"  /*视频地址*/
  autoplay /*自动播放*/
  controls /*播放控件*/
  poster="images.jpg" /*视频封面*/
  preload="auto"  /*视频预加载*/
  loop  /*循环播放*/
  muted  /*视频静音*/
  height="100%" /*视频高度*/
  width="100%" /*视频宽度*/

  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
    <source src="some-video.mp4" type="video/mp4">
    <source src="some-video.ogg" type="video/ogg">
</video>

• poster：视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
• preload：规定是否预加载视频，可能的值：
  • auto - 当页面加载后载入整个视频
  • meta - 当页面加载后只载入元数据
  • none - 当页面加载后不载入视频