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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.