Video Related attributes

1. Auto play

Currently, major browsers have strengthened Autoplay restrictions: browsers do not allow audio media files to be played automatically without interaction. And each browser has a different implementation of the autoplay strategy.

{/* Auto play */}
<video ref={ videoRef } controls autoPlay />
Copy the code

In order to solve the Autoplay failure, here are two ways to solve the Autoplay limit

  • Bypass Autoplay limits when playback fails
  • Bypass the Autoplay restriction directly

1.1 Bypass Autoplay restrictions when playback fails

In practice, a page is not completely restricted by Autoplay, and as the user uses the page more, the browser adds the page to its Autoplay whitelist.

According to this principle, when a playback failure is detected, the user can be directed to click a location on the page to resume playback. (All tests in Google Browser failed to play)

// Can play listener. Triggered when the browser can start playing the specified audio/video
this.videoRef.addEventListener('canplay'.() = > {
    console.log('Video ready to play')
    setTimeout(() = > {
        // this.videoref.paused, used to determine whether the video is being played or not
        console.log(this.videoRef.paused) 
        console.log('Is the video paused?'.this.videoRef.paused) 
        this.isPlay = !this.videoRef.paused
    }, 500)})// Use promise to determine if it is playing
const videoPromise = this.videoRef.play()
if(!!!!! videoPromise) { videoPromise.then(() = > {
        this.isPlay = true
        console.log('Playback successful')
    }).catch(() = > {
        this.isPlay = false
        console.log('Playback failed')})}else {
    // You can use canplay to listen if it is playing
}
Copy the code

1.2 Bypass Autoplay restrictions directly

You can bypass the Autoplay restriction directly in two ways

  • Turn off the muted attribute in the video TAB to true. Media that do not contain sound are not restricted by Autoplay. (Guide the user to turn on the sound)
  • UI prompts the user to trigger play

Note: No matter which scheme is used, it is not possible to play audio media automatically without user action within the limits of the autoplay policy. Although the browser maintains a whitelist locally to determine which sites to remove autoplay restrictions from, this whitelist cannot be detected by Javascript.

/ / move
document.body.addEventListener('touchstart'.() = > {
    console.log('Trigger play')
    this.videoRef.play();
})
/ / PC
document.body.addEventListener('mousedown'.() = > {
    console.log('Trigger play')
    this.videoRef.play();
})
// automatic playback is triggered under IOS phones on wechat, most IOS phones can automatically play normally (Android phones can only trigger playback by TouchStart)
document.body.addEventListener('WeixinJSBridgeReady'.() = > {
    console.log('Trigger play')
    this.videoRef.play();
})
Copy the code

Note: Safari only allows user interaction to trigger playback of audio media, not Autoplay restriction after user interaction.

2. Play time attribute control

Let’s start with a piece of code that plays fine on Google, but starts all over again on mobile and Safari. Using canplay and LoadedMetadata, onCanPlay events to determine the state of the video and currentTime, but still invalid on mobile.

const videoPromise = this.videoRef.play()
this.videoRef.currentTime =  10
Copy the code

Solution:

  • Set the video’s Timeupdate event listener to set the playback time
  • Set the playback time using a timer
this.videoRef.play();   
// Update playback time by time
let timer = setTimeout(function(){
    // There are still some drawbacks, if the user triggers the video playback, but the load is too long, there will be a problem
    this.videoref. currentTime = Time to be set;clearTimeout(timer);
},200);

// timeupdate: The playback time is updated when the current playback position has been changed
this.videoRef.addEventListener('timeupdate'.(e) = > {
    console.log('timeupdate')
    let timeDisplay = Math.floor(this.videoRef.currentTime);
    if(timeDisplay > 0) {if(this.firstOpen){
            this.videoRef.currentTime = 10;
            this.firstOpen = false; }}})// seeking: The search begins. Triggered when the user starts to move/jump to a new location in the audio/video
this.videoRef.addEventListener('seeking'.(e) = > {
    // Handle whether the video plays to the specified time
    console.log('Start moving progress bar'.this.videoRef.currentTime)
})

// seeked: the search is over. Triggered when the user has moved/jumped to a new location in the video
this.videoRef.addEventListener('seeked'.(e) = >  {
    console.log('Progress bar has been moved to a new location'.this.videoRef.currentTime)
})
Copy the code

There is a small part of the mobile phone, after the broadcast, reset the audio file for this. VideoRef. CurrentTime = 0 is invalid.

// Solution
this.videoRef.currentTime = 0.01
Copy the code

Other properties:

this.videoRef.error; / / null: normal

this.videoRef.error.code; Network error 3. Decoding error 4. Invalid URL

this.videoRef.networkState; This element is not initialized 1. Normal but not using network 2. Downloading data 3. No resources found

this.videoRef.buffered; // Return to the buffered area, TimeRanges

this.videoRef.paused; // Whether to pause

this.videoRef.defaultPlaybackRate = value; // The default playback speed can be set

this.videoRef.playbackRate = value; // The current playback speed will change immediately after setting

this.videoRef.played; // Return to the already played area, TimeRanges,

this.videoRef.seekable; // Return TimeRanges where you can seek

this.videoRef.ended; // Whether to end

Video Related Events

Only when the events related to Video labels are triggered can you handle the service logic properly.

// loadstart video lookup. Triggered when the browser starts looking for the specified audio/video, that is, when the loading process begins
this.videoRef.addEventListener('loadstart'.(e) = > {
    console.log('Warning that metadata for video has been loaded')
    // console.log(e)
    console.log(this.videoRef.duration)            // NaN
})

// durationchange Durationchange. Triggered when the specified audio/video duration data changes. After loading, the duration changes from NaN to the actual audio/video duration
this.videoRef.addEventListener('durationchange'.(e) = > {
    console.log('The duration of the video has changed')
    console.log(this.videoRef.duration)           // The actual duration of the video (in seconds)
})

// loadedmetadata: load metadata. Triggered when the specified audio/video metadata has been loaded, including: duration, size (video only), and text track
this.videoRef.addEventListener('loadedmetadata'.(e) = > {
    console.log('Warning that metadata for video has been loaded')
    // console.log(e)
})

// LoadedData: Video download listener. Triggered when data for the current frame has been loaded, but there is not enough data to play the next frame of the specified audio/video
this.videoRef.addEventListener('loadeddata'.(e) = > {
    console.log('Indicates that data for current frame is available')})// progress: browser download listener. Triggered when the browser is downloading the specified audio/video
this.videoRef.addEventListener('progress'.(e) = > {
    console.log('Video is downloading now')})// canplay: canplay listener. Triggered when the browser can start playing the specified audio/video
this.videoRef.addEventListener('canplay'.(e) = > {
    console.log('Video ready to play')
    setTimeout(() = > {
        // this.videoref.paused
        console.log('Is the video paused?'.this.videoRef.paused) 
        this.isPlay = !this.videoRef.paused
    }, 1000)})// canplaythrough: canplay smoothly. Triggered when the browser expects to be able to continue playing the specified audio/video without pausing to buffer
this.videoRef.addEventListener('canplaythrough'.(e) = > {
    console.log('Prompt video can play continuously without pausing')
    console.log(e)
})

// play: play listener
this.videoRef.addEventListener('play'.(e) = > {
    console.log('Warning that this video is playing')})// pause: Pauses listening
this.videoRef.addEventListener('pause'.(e) = > {
    console.log('Pause play')})// seeking: The search begins. Triggered when the user starts to move/jump to a new location in the audio/video
this.videoRef.addEventListener('seeking'.(e) = > {
    // Whether the update is to the latest location is handled here
    console.log('Start moving progress bar'.this.videoRef.currentTime)
})

// seeked: the search is over. Triggered when the user has moved/jumped to a new location in the video
this.videoRef.addEventListener('seeked'.(e) = >  {
    console.log('Progress bar has been moved to a new location'.this.videoRef.currentTime)
})

// waiting: Video load waiting. Triggered when the video stops due to the need to buffer the next frame
this.videoRef.addEventListener('waiting'.(e) = > {
    console.log('Video load wait')
    console.log(e)
})

// Playing: Triggered when a video is ready after it has been paused or stopped for buffering
this.videoRef.addEventListener('playing'.(e) = > {
    console.log('playing')
    console.log(e)
})

// timeupdate: The playback time is updated when the current playback position has been changed
this.videoRef.addEventListener('timeupdate'.(e) = > {
    // console.log('timeupdate')
    // let timeDisplay = Math.floor(this.videoRef.currentTime);
    // if(timeDisplay > 0){
    // if(this.firstOpen){
    // this.videoRef.currentTime = 10;
    // this.firstOpen = false;
    / /}
    // }
})

// Ended: The playback ends
this.videoRef.addEventListener('ended'.(e) = > {
    console.log('Video over')
    console.log(e)
})

// error: playback error
this.videoRef.addEventListener('error'.(e) = > {
    console.log('The video went wrong')
    console.log(e)
})

// volumechange: when the volume changes
this.videoRef.addEventListener('volumechange'.(e) = > {
    console.log('volumechange')
    console.log(e)
})

// cost: when a browser attempts to obtain media data but it is not available
this.videoRef.addEventListener('stalled'.(e) = > {
    console.log('stalled')
    console.log(e)
})

// ratechange: When the playback speed of the video has been changed
this.videoRef.addEventListener('ratechange'.(e) = > {
    console.log('ratechange')
    console.log(e)
})
Copy the code

About wechat H5 video compatibility introduction: mobile terminal compatibility

The last

Mobile Web for Video autoplay compatibility is poor, especially Android. All kinds of problems, all kinds of compatibility, all kinds of heart tired.

That’s the end of this article. I hope it helps.

Xiaobian for the first time to write an article writing style is limited, untalented and shallow, the article if there is wrong, hope to inform.