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的特性，否则，还是不会起作用。

另，关于自动播放，之前也找到一个方案，在一个网站上右键查看源代码扒拉下来的一个js文件,没有文档，也不知道来源，名字叫hls-0.6.14.min.js， 一看就是和hls有关的，可以实现自动播放，但仅限于播放m3u8的视频，注意，是视频，不是直播流，别的都放不了，但能实现不全屏自动播放。 使用方法是：

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);
    }