video 标签详解

<video 
    class="video-source"
    width="100%"
    height="240px"  /*如果有封面，请设置高度*/
    preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
    controls /* 显示播放器控件 */ 
    style="object-fit:cover/fill"
    playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
    webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
    x5-video-player-type="h5-page" /*启用X5内核同层渲染*/
    x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
    x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
    /* x5-playsinline="true" */  /*设置X5内核为行内播放模式，不能和`x5-video-player-type同时设置会覆盖*/
    x-webkit-airplay="true"  /*未知*/
    x5-video-ignore-metadata="true" /*未知*/
</video>

`preload="auto"`

属性规定在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。

一般参数可能的值：

auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

`muted`

当设置该属性后为静音播放

坑：当为多路直播（即多个video同时播放的时候），IOS上表现只能播放1个video，其他无法播放

解决方法：IOS系统下，默认video静音播放，等video播放后，设置为非静音

监听 video 的 play 事件

handleOnPlay = e => {
    // ios 需要静音才能 同时 播放多个video ，默认静音播放，在3s 后关闭静音
    if (iphone) {
      setTimeout(() => {
        const videoElement = this.videoRef.current
        videoElement && (videoElement.muted = false)
      }, 3000)
    }
  }

`controls="controls"`

属性规定浏览器应该为视频提供播放控件

`autoplay="autoplay"`

视频自动播放设置

坑：不论安卓IOS在手机上都不能自动播放，需要通过点击事件等触发控制播放

`webkit-playsinline playsinline`

视频播放时局域播放，不脱离文档流 。但是这个属性比较特别，需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而IOS的WeChat却支持。

这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。

`x5-video-player-type="h5-page"`

启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性

官方文档：H5同层播放器接入规范

坑：不同版本的X5内核video标签的展示形式可能有差异，例如(video标签上有全屏按钮)

解决方法：扫码更新X5内核

`x5-video-orientation`

声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式

其他坑

IOS只能支持m3u8的流，直接放入 video 的 src
Android可支持flv、m3u8的流、需要(flv.js/hls.js)转换,并且注意流地址和需要和网页地址保持一致(例如 http =>http,https=>https)

移动端调试

移动端很多情况，真机上和chrome 开发者工具上展现形式不一致，如何高效的调试，可用到以下这些工具

抓包工具 Charles、https证书
debugger eruda 或 vConsole
真机调试(和微信开发者真机调试类似) Weinre 或者 spy-debugger

直播参考文献

H5直播起航 H5直播入门