这段时间在做一个直播项目,有直播需求,也有视频播放需求,要求能在微信中以半屏的方式播放,另外半屏可以做一些操作,还有些组件需要悬浮在视频上方。
网上各种扒拉,各种实验,以求在微信中实现不全屏就能播放和自动播放,最终还是用了单纯的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);
    }

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