Excellent software and practical tutorials
iosThere is no problem with the mobile phone realizing autoplay automatic playback, add muted After the attribute canAutoplay, just turned on the silent mode.AndroidSome mobile phones have a play start button that can be clicked to play, but some mobile phones do not have a play button and the video cannot be played. One solution is to add muted Property (mute), but the result is that there is sound but no playback process.
PC and Android use hls.js to realize automatic playback of hls streams and full-screen and non-full-screen playback
First usedhls.jsPlugins, can be played automatically on PC and Android devices, full screen and nonFull Screen Play.
However, it does not support playback on Apple phones. The HLS official website says that the library uses MSE. HTML5 video and MediaSource Extensions for playback. It is found that MSE does not support IOS. The mdn screenshot is as follows:
Summary: PC and Android both support hls.js, but iPhone does not. Fortunately, I found that the video tag supports hls playback.
Exploration: Apple mobile phone uses video to achieve automatic playback of HLS streams.
After testing, it is necessary to click play to play, and it cannot be played automatically. The reasons are as follows (New):
The translation + test is as follows:
The following conditions must be met for automatic playback:
1.
2.
3.
4. Allow elements to play inline and not automatically enter fullscreen mode when starting playback, that is, playsinline webkit-playsinline.
If the autoplay is already in progress, any of the following situations will pause the autoplay:
1. The element becomes invisible, for example by scrolling outside the viewport.
2.
After testing, the video has the following properties and can be played automatically:
Summary: Use the autoplay muted playsinline="true" webkit-playsinline="true" attribute to enable automatic playback. The most fatal thing is that the automatic playback is silent.
Compromise: Apple phones do not need to automatically hold, and need to play in full screen and non-full screen
Change the code to autoplay playsinline="true" webkit-playsinline="true" controls. Click to play (full screen pops up automatically). In iOS 13, double-finger retraction allows inline playback. Below iOS 13, retraction immediately pauses, and full screen playback will still pop up after clicking to play again.
After searching, the code was changed to the following:
x-webkit-airplay="allow" is a must. This attribute should enable this video to support the AirPlay function of iOS. However, adding this code can play inline in iOS 13 and below, but it will not work if you delete it. x5-playsinline prohibits full screen in WeChat.
Summarize:
1. Both PC and Android support hls.js, but Apple phones do not.
2. Apple phones can use video to play HLS streams. Using the autoplay muted playsinline="true" webkit-playsinline="true" attribute can play automatically. The more fatal problem is that there is no sound during automatic playback.
3. For inline playback below IOS13, you must add x-webkit-airplay="allow".
