HTML5 custom player (simplified) and html5 simplified

HTML5 custom player (simplified) and html5 simplified

This is a self-contained html5 tag <video> </video>, which is very practical. There are many benefits to using this tag (I will not talk about the benefits, For details, refer to Google, Bing, Baidu ).

The main body of the html5 player is the <video> </video> tag. The attributes include:

· Src: Video URL

· Poster: Specifies the video album art. No picture is displayed during playback.

· Preload: pre-load

· Autoplay: automatic playback

· Loop: loop playback

· Controls: control bar provided by the browser

· Width: Specifies the video width.

· Height: Video height

In combination with video tags, JS has a lot of operation methods and deformation, and many of the experts have provided them with chestnuts, so I won't be ugly. Here I will start to make this simple player.

:

Core code (non-media method ):

1 <video loop id = "video" preload> 2 <! -- Audio source --> 3 <source src = "img. webm "> 4 <span> your browser does not support video tags, try another browser </span> 5 </video> 6 <div> 7 <progress id = "progress" value = "0" max = "100"> 8 <span> </span>/<span> </span> 9 </div> 10 <div> 11 <button id = "btn_play"> play </button> 12 <button id = "btn_pause"> pause </button> 13 <button id = "btn_muted"> mute </button> 14 <button id = "btn_fullScreen"> full screen </button> 15 <input type = "range" value = '1' name =" Range "id =" btn_volume "min =" 0 "max =" 1 "step = '0. 1'> 16 <button id = "btn_go"> acceleration </button> 17 <button id = "btn_back"> deceleration </button> 18 <button id = "go_five"> fast forward to 5 s </button> 19 <button id = "back_five"> 5 s </button> 20 </div> 21 22 <script> 23 var btn_play = document. getElementById ('btn _ play'); 24 var btn_pause = document. getElementById ('btn _ pause'); 25 var video = document. getElementById ('video'); 26 // play 27 bt N_play.disabled = false; 28 btn_play.addEventListener ('click', function () {29 video. play (); 30 this. disabled = true; 31 btn_pause.disabled = false; 32 // console. log (video. duration); 33}); 34 // pause 35 btn_pause.disabled = true; 36 btn_pause.addEventListener ('click', function () {37 video. pause (); 38 this. disabled = true; 39 btn_play.disabled = false; 40}); 41 // mute 42 var btn_muted = document. getEl EmentById ('btn _ muted'); 43 btn_muted.addEventListener ('click', function () {44 video. muted =! Video. muted; 45 this. innerHTML = video. muted? 'Cancel muting ': 'mute '46}); 47 // full screen 48 var btn_fullScreen = document. getElementById ('btn _ fullScreen '); 49 btn_fullScreen.addEventListener ('click', function () {50 fullScreen (video); 51 }); 52 // volume control 53 var btn_volume = document. getElementById ('btn _ volume '); 54 btn_volume.addEventListener ('change', function () {55 // console. log ('change'); 56 video. volume = this. value; 57}) 58 // accelerate 59 var btn_go = document. g EtElementById ('btn _ go '); 60 btn_go.addEventListener ('click', function () {61 video. playbackRate + = 0.1; 62 console. log (video. playbackRate) 63}) 64 // slow down 65 var btn_back = document. getElementById ('btn _ back'); 66 btn_back.addEventListener ('click', function () {67 video. playbackRate-= 0.1; 68 console. log (video. playbackRate) 69}) 70 // fast forward to 71 var go_five = document. getElementById ('go _ five'); 72 go_fiv E. addEventListener ('click', function () {73 video. currentTime + = 5; 74}) 75 // return for five seconds 76 var back_five = document. getElementById ('back _ five'); 77 back_five.addEventListener ('click', function () {78 video. currentTime-= 5; 79}) 80 var I = 0; 81 // progress bar 82 var pro = document. getElementById ('progress'); 83 var span1 = document. querySelectorAll ('span ') [1]; 84 console. log (span1) 85 // registers the video playback status event 86 87 video. AddEventListener ('timeupdate', function () {88 89 pro. value = video. currentTime/video. duration * 100; 90 91 var ss = Math. floor (video. currentTime/60); 92 var mm = Math. floor (video. currentTime % 60); 93 ss = ss <10? '0' + ss: ss; 94mm = mm <10? '0' + mm: mm; 95 span1.innerHTML = ss + ':' + mm; 96}) 97 98 function fullScreen (ele) {99 if (ele. required requestfullscreen) {100 ele. export requestfullscreen (); // Firefox 101} else if (ele. webkitRequestFullscreen) {102 ele. webkitRequestFullscreen (); // Google browser 103} else if (ele. oRequestFullscreen) {104 ele. oRequestFullscreen (); // operabrowser 105} else if (ele. msRequestFullscreen) {106 ele. msRequestFullscreen (); // IE browser 107} else if (ele. requestFullscreen) {108 ele. requestFullscreen (); 109} 110} 111 112 </script>

The code is very simple. There are no special network queries, playing directories, and automatic identification of playing time.

The framework body of the html5 player is constructed simply.

Here we will give you some mainstream media methods and attributes (there will be a lot of explanations and chestnuts when searching these items ):

Get video object(0.0 Haha, I also search/shy faces online)　

Media = document. getElementById ("media"); // Add id = "media" to the video tag"

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

· Media. error; // null: normal

· Media. error. code; // 1. User termination 2. network error 3. decoding error 4. Invalid URL

// Network status

-Media. currentSrc; // return the URL of the current resource.

-Media. src = value; // return or set the URL of the current resource

-Media. canPlayType (type); // whether resources in a certain format can be played

-Media. networkState; // 0. This element is not initialized. 1. The network is not used. 2. The data is being downloaded. 3. The resource is not found.

-Media. load (); // reload the resources specified by src.

-Media. buffered; // return the buffered area, TimeRanges

-Media. preload; // none: Do not preload metadata: pre-load resource information auto:

// Preparation status

-Media. readyState; // 1: HAVE_NOTHING 2: HAVE_METADATA 3. HAVE_CURRENT_DATA 4. HAVE_FUTURE_DATA 5. HAVE_ENOUGH_DATA

-Media. seeking; // specifies whether or not seeking is being performed.

// Playback status

· Media. currentTime = value; // The current playback position. You can change the position by assigning a value.

· Media. startTime; // It is generally 0. If it is streaming Media or a resource not starting from 0, it is not 0.

· Media. duration; // The length of the current resource. The stream returns an unlimited number.

· Media. paused; // whether to pause

· Media. defaultPlaybackRate = value; // default playback speed, which can be set

· Media. playbackRate = value; // The current playback speed. The setting changes immediately.

· Media. played; // return the played area, TimeRanges. For details about this object, see the following

· Media. seekable; // returns the region TimeRanges that can be seek.

· Media. ended; // whether to end

· Media. autoPlay; // whether to play automatically

· Media. loop; // whether to play cyclically

· Media. play (); // play

· Media. pause (); // pause

// Video control

· Media. controls; // whether the default control bar exists

· Media. volume = value; // volume

· Media. muted = value; // mute

· TimeRanges (region) object

· TimeRanges. length; // number of segments

· TimeRanges. start (index) // start position of the index segment

· TimeRanges. end (index) // The end position of the index segment.

// Related events

Var eventTester = function (e ){

Media. addEventListener (e, function (){

Console. log (new Date (). getTime (), e)

}, False );

}

· EventTester ("loadstart"); // The client starts to request data.

· EventTester ("progress"); // The client is requesting data

· EventTester ("suspend"); // delay download

· EventTester ("abort"); // The client proactively terminates the download (not due to an error)

· EventTester ("loadstart"); // The client starts to request data.

· EventTester ("progress"); // The client is requesting data

· EventTester ("suspend"); // delay download

· EventTester ("abort"); // The client proactively terminates the download (not due to an error ),

· EventTester ("error"); // An error occurred while requesting data

· EventTester ("stalled"); // network speed stall

· EventTester ("play"); // triggered when play () and autoplay start play

· EventTester ("pause"); // triggered by pause ()

· EventTester ("loadedmetadata"); // The resource length is obtained successfully.

· EventTester ("loadeddata ");//

· EventTester ("waiting"); // wait for data, not an error

· EventTester ("playing"); // start playback

· EventTester ("canplay"); // It can be played, but it may be paused during loading.

· EventTester ("canplaythrough"); // It can be played. All the songs have been loaded.

· EventTester ("seeking"); // searching

· EventTester ("seeked"); // search complete

· EventTester ("timeupdate"); // Changes the playback time

· EventTester ("ended"); // The playback ends.

· EventTester ("ratechange"); // Changes the playback speed

· EventTester ("durationchange"); // resource Length Change

· EventTester ("volumechange"); // volume change

For this type of method, I suggest looking for a whole Chestnut to learn, because this type of method is a whole, and it will be a lot of trouble if you separate it.