Implementation of automatic playback of HTML5 page audio and video in WeChat and app, html5app

The implementation of automatic playback of HTML5 page audio and video under the app, html5app

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

Pure H5 pages cannot be automatically played on mobile phones. Most mobile browsers disable the autoplay function of video and audio, many mobile browsers do not support the first JavaScript call of the play method for playback (only when you manually pause the playback 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.

Copy XML/HTML Code to clipboard

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 effect to solve the automatic playback problem */
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 section describes the implementation of HTML5 page audio and video playback and automatic playback under the app. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!