直播项目中微信半屏播放视频及自动播放的探索与实践

xinxi1368

我目前正在做一个直播项目，既需要直播，又需要视频播放，要求视频在微信上半屏播放，另一半屏幕可以进行一些操作，还需要一些组件悬浮在视频上方。

在网上搜索和尝试了很多方法，尝试在微信中实现非全屏播放和自动播放，但最终还是用了一个简单的video标签，还没有找到完美的自动播放方案。

以非全屏模式播放视频

<p><pre>    <code class="language-js"><video
          loop
          autoPlay
          src={url}
          controls={true}
          poster={pic}
          playsinline
          webkit-playsinline
          x5-video-player-type="h5-page"
        /></code></pre></p>
在微信的众多属性中，最后一个属性是最重要的。

<p><pre>    <code>x5-video-player-type="h5-page"</code></pre></p>
注意网上很多人说这个属性的值为h5，其实不然，只有h5页面才有效。但是这种方法只能播放视频，直播流（m3u8）还是会跳出原文档流，变成全屏。所以我的做法是加一个判断，在直播流的情况下用到其他几个属性：

<p><pre>    <code class="language-js"><video
            src={url}
            controls={true}
            poster={pic}
            playsInline
            webkit-playsinline
            x-webkit-airplay="true"
            x5-playsinline="true"
          /></code></pre></p>
播放直播的时候，上面的决定性属性不能加，不然还是会变成全屏的。而且如果是在react下，最后两个属性一定要写值，不能用react默认为true的特性而不写值，不然不行。

另外关于自动播放，之前我也找到过解决办法，在一个网站右键查看源码，拉出一个js文件，没有文档，来源不明，名字叫hls-0.6.14.min.js，明显和hls有关，能实现自动播放，但是仅限于播放m3u8视频，注意是视频，不是直播，不能播放其他的，但是可以实现不全屏的自动播放。

使用方法：

<p><pre>    <code class="language-js">let Hls = (window as any).Hls;
    if (Hls && Hls.isSupported()) {
      this.hls = new Hls();
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        if (this.player) {
          this.player.play();
        }
      });
    }
        //----------
        this.player = document.findElementById(&#39;video&#39;);
        if (this.hls && url && this.player) {
      this.hls.loadSource(url);
      this.hls.attachMedia(this.player);
    }</code></pre></p>
代码中的hls是引用Js文件后得到的全局对象，由于这里不能上传附件，我只能简单说一下使用方法，如果有同学知道这个js的出处或者文档，希望可以在下面的辟谣中解释一下。