HTML 5 Audio/video DOM Canplaythrough event encountered on the mobile side of the pit

Canplaythrough Event Definitions and usage

The Canplaythrough event occurs when the browser is expected to continue playing the specified audio/video without buffering.

When audio/video is in the loading process, the following events occur sequentially:

• Loadstart
• Durationchange
• Loadedmetadata
• Loadeddata
• Progress
• Canplay
• Canplaythrough

Browser support

All major browsers support Canplaythrough events.

Note: This event is not supported by Internet Explorer 8 or earlier browsers.

The above is an explanation of w3cschool, but in my experimental tests, I found that Chrome,firefox is supported for this event, and that the mobile side needs an auxiliary method to support this event.

When we do mobile H5, it may be necessary to preload resources, including images, audio and video files

varAudio =NewAudio (); Audio.addeventlistener ("Canplaythrough", function () {Console.log ("Load Complete! ");},false); Audio.addeventlistener ("Error", function () {Console.log ("load failed! ");},false); Audio.src= src;

Look at this code as if every mistake, in the PC-side detection is not wrong, but when we put on the H5 above will be wrong, because the phone above the music is streaming media load, that is, in the process of loading can play side loading side play, Canplaythrough event on the mobile side, only allow audio/ The video file will not execute until it has been loaded.

varAudio =NewAudio ();//Canplaythrough This event in the mobile phone high media to play on the side to listen to, PC-side chrome can be perfectly supportedAudio.addeventlistener ("Canplaythrough", function () {//we found out that after the play was done,Console.log ("Load Complete! ");},false); Audio.addeventlistener ("Error", function () {Console.log ("load failed! ");},false); Audio.src=Src;audio.play ();

But this will cause the sound to play when it loads, so do it.

varAudio =NewAudio ();//Canplaythrough This event in the mobile phone high media to play on the side to listen to, PC-side chrome can be perfectly supportedAudio.addeventlistener ("Canplaythrough", function () {audio.pause (); Audio.volume=1; //we found out that after the play was done,Console.log ("Load Complete! ");},false); Audio.addeventlistener ("Error", function () {Console.log ("load failed! ");},false); Audio.src=Src;audio.play (); Audio.volume=0;

But found that the effect is not good, there will be a pause and other phenomena.

So I finally thought of a way to get the audio file through XMLHTTP:

function createxhr () {Try{return NewXMLHttpRequest (); }Catch(e) {}Try{return NewActiveXObject ("msxml2.xmlhttp.6.0"); }Catch(e) {}Try{return NewActiveXObject ("msxml2.xmlhttp.3.0"); }Catch(e) {}Try{return NewActiveXObject ("msxml2.xmlhttp"); }Catch(e) {}Try{return NewActiveXObject ("Microsoft.XMLHTTP"); }Catch(e) {}return NULL;} varXhr=createxhr (); Xhr.onreadystatechange=function () {if(Xhr.readystate = =4){        if((Xhr.status >= $&& Xhr.status < -) || Xhr.status = =304) {callnext (); }Else{callnext (); }}};SCR="Song.mp3";//true (asynchronous) or False (synchronous)Xhr.open ("Post"Srcfalse); Xhr.setrequestheader ("Content-type","application/x-www-form-urlencoded"); Xhr.send ()

But it is still not perfect to find that the music still has a delay phenomenon;

Welcome the Big God to shoot the brick, give the solution

HTML 5 Audio/video DOM Canplaythrough event encountered on the mobile side of the pit