H5 video development problems and related knowledge points

 H5 videoMP4 is the current video format supported by all browsers, so MP4 should be the preferred format for on-demand Web video.

When MP4 is played, the get request is still sent, but HTTP returns 206 status code, that is
partial Content. For details about the 206 status code, see the following sections

• Http 206 status code

video.pause() You can pause the video, but you can’t stop the video from continuing to load. Media elements continue to load until they are collected by the garbage collection mechanism.

To stop playing immediately after pausing, use the following methods

video.pause()
video.src=' '
video.removeAttribute('src');Copy the code

For iOS 10 and later, you can add the playsinline attribute to the video TAB to prevent full-screen playback on iOS before iOS 9
webkit-playsinlineProperty, to be compatible, add both properties.

Add configuration through the client
UIwebview: webview.allowsInlineMediaPlayback = YESHowever, the playsinline attribute is required on the video element

Reference:

• HTML5 inline video on iPhone vs iPad/Browser
• allowsInlineMediaPlayback

On mobile, autoplay after addition is supported in some browsers and autoplay and other Settings, such as IOS 10+ and Chrome;

To control when play is fraternal and not user-triggered (e.g. no controls), set the sound to the video-.play () method, and switch the sound to a fraternal = false, less than 300ms later.

vide.muted = true;
video.play()
setTimeout(function () {
    video.muted = false}, 300).Copy the code

IOS9 and earlier versions require user interaction to play, that is, manually click the play button or user triggered events such as Click, Touchend, keyboard, and then call video.play() to play. Before iOS9, iOS Native UIWebView mediaPlaybackRequiresUserAction attributes to control whether the user interaction is needed.

Can a click event triggered with element.click() be considered user action? Can’t

How does the browser know if the user triggered the event? The read-only property of the Event object is isTrusted

<div id="test-ele"> This element listens for the event </div> <script> consttestEle = document.querySelector('#test-ele');
    testEle.addEventlistener('click'.function(evt) {// User trigger istrue, script or EventTarget. DispatchEvent () trigger forfalse
        console.log(evt.isTrusted);
    }, false);
    testEle.click() // This trigger, evt.istrusted =false
</script>Copy the code

For details about safari video relaxation Policies on iOS 10, see New

On Chrome, video-.play (), a non-user activity, without a video-.fraternal attribute, received an Uncaught (in Promise) DOMException error and the video was not played. On iOS, there might not be any errors, and the video might not play, so you can’t locate the problem.

Video.play () returns a Promise object. If the play fails, the returned Promise catches the error message.

const pro = video.play();
ifPro. Catch (err=>{console.log(err)}); }Copy the code

When I started getting played, I thought I was going to return a TimeRanges object, and I didn’t know what to do when I saw that the length of the TimeRanges object was the same. Later, when I was doing progress control, I needed to know how much the video had been buffered.

The Video DOM object has three properties that return the TimeRanges object, respectively
video.played/ video.buffered/ video.seekable

There is only one playing period at the beginning of the video, and there will always be only one playing period if there is no jump viewing, i.e
TimeRanges.length Value is 1; If a jump watch is performed (such as jumping from 2 minutes to 15 minutes) and the jump content is not buffered, there will be two time periods, at which time the length of TimeRanges is 2. So the number of TimeRanges will increase with the jump to view the unbuffered content, and decrease with the buffered content, at least one, that is, from the beginning to the end.

——————————————————

| = = = = = = = = = = = = = | | = = = = = = = = = = = | |

——————————————————

0, 5, 15, 19, 21

The TimeRanges object has a Length attribute and
start(),
play()Two methods:

TimeRanges: length: Play (index) // Obtains the playing (buffering) start time of the specified playing segment. Index starts from 0 and is measured in seconds. End (index) // Obtains the playing (buffering) end time of the specified playing segment

To get the start time of the first paragraph, use the
TimeRanges.start(0), the end time is
TimeRanges.end(0)The second paragraph,
TimeRanges.start(1)And so on

Reference:

• Media Buffering, Seeking, and Time Ranges: developer.mozilla.org/en-US/docs/…

• TimeRanges: developer.mozilla.org/en-US/docs/…

The height and width of the video viewing area have different fixed proportions according to the video source, but there will not be stretching or deformation due to the inconsistency between the setting ratio of the height and width of the video label or its container and that of the video source. It will automatically scale according to its own proportion according to the smaller value of the set height and width, and the insufficiency will be filled with white on both sides in the middle.