阅读 446

H5直播Video标签坑汇总

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播放后,设置为非静音

监听 videoplay 事件

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,而ISO的WeChat却支持。

这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,ISO需要设置删除 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 开发者工具上展现形式不一致,如何高效的调试,可用到以下这些工具

直播参考文献

H5直播起航 H5直播入门

关注下面的标签,发现更多相似文章
评论