It is required to be able to play in a half-screen mode in wechat, and the other half can do some operations, and some components need to hover above the video. Online all kinds of pickling, all kinds of experiments, in order to achieve the full screen in wechat can play and automatic play, and finally use a simple video label. Autoplay has not found a perfect solution so far.

Non-full-screen video playback

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

So many attributes can be decided in wechat or the last one

x5-video-player-type="h5-page"
Copy the code

Note that the value of this property is h5, but it is not. H5-page only works, but the live stream (m3U8) will still jump out of the original document stream and become full screen. So what I did was to add a judgment that is live stream case with a few other attributes:

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

In react mode, you must specify values for the last two properties. You can’t use the default value true in React mode, otherwise it won’t work.

In addition, as for auto-play, I found a solution before. I right-click on a website to check a JS file pulled down from the source code. There is no document and I don’t know the source, and its name is HLS-0.6.14.min.js. Not live stream, nothing else can be put, but can achieve incomplete automatic playback. The method of 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); }Copy the code