Video Details about labels

<video 
    class="video-source"
    width="100%"
    height="240px"/* If there is a cover, set the height */ preload="auto"/* This property allows you to load the video after the page loads */ controls /* display the player controls */ style="object-fit:cover/fill"
    playsinline="true"/*IOS wechat browser supports small window playback */ webkit-playsinline="true"/* This property is set in ios 10 to allow videos to play in a small window, i.e. not in full screen */ x5-video-player-type="h5-page"/* Enable X5 kernel same-layer rendering */ X5 -video-orientation="h5"/* Player payment direction, landscape, portraint portrait, default value portrait */ x5-video-player-fullscreen="true"/* Full screen setting, set totrueIs to prevent landscape */ /* x5-playsinline="true"*/ * * Set X5 kernel to inline play mode, cannot be overwritten with 'x5-video-player-type' */ x-webkit-airplay="true"/* Unknown */ x5-video-ignore-metadata="true"/* unknown */ </video>Copy the code

preload="auto"

Property to load the video after the page loads. If the autoplay property is set, it is ignored.

Possible values for general parameters:

  • Auto – Loads the entire video when the page loads

  • Meta – Only metadata is loaded when the page loads

  • None – Does not load the video when the page loads

muted

Mute play when this property is set

Pit: When multiple videos are played simultaneously, only one video can be played on IOS, and other videos cannot be played

Solution: In IOS, the video is played in mute mode by default. After the video is played, set it to unmute mode

Listen for the Video Play event

handleOnPlay = e= > {
    // ios requires mute to play multiple videos at the same time. By default, mute is played. After 3s, mute is turned off
    if (iphone) {
      setTimeout((a)= > {
        const videoElement = this.videoRef.current
        videoElement && (videoElement.muted = false)},3000)}}Copy the code

controls="controls"

Property specifies that the browser should provide a playback control for the video

autoplay="autoplay"

Automatic video playback Settings

Pit: No matter android or IOS, it can’t play automatically on mobile phones. It needs to be controlled by clicking events

webkit-playsinline playsinline

The video is played locally and does not deviate from the document flow. But this attribute is special, need embedded web APP like WeChat UIwebview allowsInlineMediaPlayback = YES webview. AllowsInlineMediaPlayback = YES, to take effect. In other words, if the APP doesn’t set it, it won’t work if you add it to your page. That’s why android phone WeChat always plays video in full screen, because APP doesn’t support PlaysinLine, IOS APP does.

If you want to do a full screen live broadcast or a full screen H5 experience, you need to remove the webkit-playsinline tag on IOS because false is not supported. Android doesn’t need it because it’s full screen by default. But in this case, the full screen has a play control, whether you set control or not. Do live broadcast may need to play control, but full screen H5 is not needed, then remove the full screen play control, need the following Settings: play in the same layer.

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

When the H5 player of the same layer is enabled, div can be displayed on the video layer when the video is in full screen, which is also a unique attribute of WeChat Android version

H5 peer player access specification

Pit: Different versions of the X5 kernel may display the video tag differently, for example (the video tag has a full-screen button)

Solution: Scan code to update the X5 kernel

x5-video-orientation

Declare the direction supported by the player, landscape screen, portraint vertical screen. The default value is portraint. Whether live or full screen H5 is generally played in portrait mode, but this attribute requires x5-video-player-type to enable H5 mode

Other pit

  • IOS supports only M3U8 streams, which are directly added to the video SRC
  • Android supports FLV, M3U8 streams, needs (flv.js/hls.js) conversion, and pay attention to the same stream address and needs as the web address (e.g. HTTP => HTTP, HTTPS => HTTPS)

Mobile debugging

Mobile terminal many situations, real phone and Chrome developer tools display form is inconsistent, how to effectively debug, available to the following tools

  • Caught toolsCharles,The HTTPS certificate
  • The debugger eruda or vConsole
  • Real machine debugging (And wechat developers real machine debugging similar) Weinreorspy-debugger

Live streaming references

H5 live start H5 live primer