H5.video在微信中禁止全屏播放视频和直播流

这段时间在做一个直播项目，有直播需求，也有视频播放需求，要求能在微信中以半屏的方式播放，另外半屏可以做一些操作，还有些组件需要悬浮在视频上方。
网上各种扒拉，各种实验，以求在微信中实现不全屏就能播放和自动播放，最终还是用了单纯的video标签。自动播放到目前还是没找到完美的解决方法。

非全屏播放视频

<video
          loop
          autoPlay
          src={url}
          controls={true}
          poster={pic}
          playsinline
          webkit-playsinline
          x5-video-player-type="h5-page"
        />

这么多属性，能在微信中起到决定做用的还是最后一个

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

注意，网上很多说这个属性的值是h5,但实际上不是，是h5-page才有作用，但这种方式也只能播放视频，直播流(m3u8)还是会跳出原来的文档流，变成全屏。所以我的做法是加了一个判断，是直播流的情况下用另外几个属性：

<video
            src={url}
            controls={true}
            poster={pic}
            playsInline
            webkit-playsinline
            x-webkit-airplay="true"
            x5-playsinline="true"
          />

播放直播流的时候不能加上上面起决定作用的那个属性，否则还是会变成全屏，而且，如果是在react下，必须给后两个属性写上值，不能使用react下不写值默认等于true的特性，否则，还是不会起作用。

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(‘video‘);
        if (this.hls && url && this.player) {
      this.hls.loadSource(url);
      this.hls.attachMedia(this.player);
    }

代码中的Hls 就是引用了那个Js文件后得到的全局对象，由于此处不能上传附件，就只能简单说一下使用方法，如果有哪位同学知道这个js的来源或文档，希望能在下方流言说明一下。

原文地址：https://blog.51cto.com/wuzishu/2437629