Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the common use scenarios of Video in the front end", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the common use scenarios of Video in the front end" can help you solve your doubts.

1. Native H5 video tag

Your browser does not support Video tags

two。 Third-party plug-in video.js

_ this.player = videojs (_ this.videoNode, {autoplay: true, bigPlayButton: false, controls: true, preload: 'auto', poster: poster, notSupportedMessage:' video loading failed Please refresh and try', sources: [{src: videoUrl, type: 'video/mp4',},],}, function onPlayerReady () {this.play () }) (this.videoNode = node)} className= "video-js vjs-big-play-centered" preload= "auto" autoplay= "autoplay" playsinline='true' webkit-playsinline='true' x5 videoplayerlytypewritten players h6'x5 videoplayers fullscreenlies false' x5 videowriters

2.1supports all the configuration parameters of the native H5 video tag and has a richer configuration.

2.2 Multi-environment compatibility

3. Scenarios in business development

The performance is basically good at present.

3.1 implementation of automatic playback

3.1.1 non-WeChat end

At present, the main method is to call the play method in the onPlayerReady callback of videojs, and it needs to be triggered manually by the user in special circumstances.

3.1.2 Wechat

Wechat (especially ios), in order to achieve auto playback, is currently triggered mainly by adding callback of Wechat WeixinJSBridgeReady events.

Document.addEventListener ("WeixinJSBridgeReady", function () {this.player.play ();}, false)

Range: bytes=0- header information, which is used to detect whether the server supports Range requests

Accept-Ranges header (and its value is not "none"), then the server supports scope requests

Content-Length is also valid information because it provides the full size of the video to be downloaded

The Content-Range response header indicates the location of this part in the entire resource.

Range-the size of the corresponding request interval returned by the Content-Range in this case when the request can be made in fragments

5. Other scenes

5.1 how to implement local preview of video

The function of local preview of video is mainly realized by URL.createObjectURL () method. The URL.createObjectURL () static method creates a DOMString that contains a URL that represents the object given in the parameter. The life cycle of this URL and the document binding in the window in which it was created. This new URL object represents the specified File object or Blob object.

Video local preview example

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.