H5.video prohibit full-screen playback video streams and live micro-letter

During this time doing a live project, there is live demand, but also video playback needs, requirements can be played in a half-screen in the micro letter, the other half of the screen can do some operation, some components require floating above the video.
Bala online variety, various experiments, in order to achieve the micro-channel can play in full-screen and not automatically play, eventually with a simple video label. Autoplay is still not found the perfect solution.

---

Non-full-screen video playback

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

So many properties, can play decide to do in the micro letter or last used

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

Note that many of the Internet, said the value of this property is h5, but it's not, is the h5-pageonly role, but this approach can only play video, live streaming (m3u8) will still flow out of the original document into the full screen. So my approach is the addition of a judge, the case of live streaming with several other attributes:

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

Play live stream when 不能combined with the above properties play a decisive role, or otherwise will become full-screen, and, if it is under react, the value must be written to the two properties can not be used without written react default value is equal to true features, otherwise, or will not work.

---

Also, with regard to auto-play, before also find a program, a right to view the source code file js push lightly down on a website, no documentation, do not know the source, the name hls-0.6.14.min.js, a look that is and hls-related, can automatically play, but only to play video m3u8, pay attention to, is the video, not the live stream, others are not put, but can not achieve automatic full screen playback.
Use is:

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

Code Hls is a reference to the global object that after Js documents are due here can not upload attachments, can only briefly about the use, if there are students who know the js source or document, hoping to rumors at the bottom Explain.