For more information about the automatic playback of H5 page audio and video on WeChat and apps, h5app

For information about automatic playback of H5 page audio and video under and app, h5app

Automatic playback of audio and video on H5 pages

Currently, most H5 pages support playing background music and videos. How can we achieve automatic playback?

The pure H5 page cannot be automatically played on the mobile phone. Most mobile browsers disable the autoplay function of video and audio.
In addition, many mobile browsers do not support the first JavaScript call of the play method for playback (only when you manually click the play and pause it, and then use the code for play ).
This is mainly used to prevent unnecessary automatic playback from wasting traffic.

The following code is used to enable playback after the first touch and automatic playback under the app.

1 function autoPlayMusic (){
2/* automatically play the music effect to solve the problem of automatic playback by the browser or APP */3 function musicInBrowserHandler () {4 musicPlay (true); 5 document. body. removeEventListener ('touchstart', musicInBrowserHandler); 6} 7 document. body. addEventListener ('touchstart', musicInBrowserHandler); 8/* automatically play the music, solving the problem of automatic playback */9 function musicInWeixinHandler () {10 musicPlay (true); 11 document. addEventListener ("WeixinJSBridgeReady", function () {12 musicPlay (true ); 13}, false); 14 document. removeEventListener ('domainloaded', musicInWeixinHandler); 15} 16 document. addEventListener ('domainloaded', musicInWeixinHandler); 17} 18 function musicPlay (isPlay) {19 var media = document. getElementById ('mymusic'); 20 if (isPlay & media. paused) {21 media. play (); 22} 23 if (! IsPlay &&! Media. paused) {24 media. pause (); 25} 26}

 

The above is for reference only. Hope the experts can help you revise a better and more comprehensive approach.

Prepared by: Night 10:25:54