How to automatically play background music in H5 videos

This time I will bring you how to automatically play the background music in the H5 video, what are the precautions for the background music to automatically play in the H5 video, the following is a practical case, let’s take a look take a look.

Autoplay of musicAttributes, here is also an introduction:

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

autoplay attribute stipulates that once the audio is ready, it will start playing immediately.

If this property is set, the audio will play automatically.

But in actual application, we often encounter the phenomenon that automatic playback cannot occur, mainly because some browsers or mobile phones block or do not support the autoplay attribute. Here I will introduce the method I use.

First of all: The code in the html is as follows

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

Use the following code in the js file

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})

After writing this, most Android machines can basically do it Automatic playback has been implemented, but Apple phones still don’t work at this time.

Here I used a button to add to the loading page. When the loading is completed, click the button to guide the user to complete the automatic playback of background music. , the code is as follows:

$("html").one('touchstart',function(){
audio.play();
})

At this point, the automatic playback of background music is realized. This method is suitable for projects that have loading pages and need to click to enter h5...

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

H5 implements custom path animation in Canvas

How to call APP in H5 page

Use canvas to achieve the barrage effect in videos

The above is the detailed content of How to automatically play background music in H5 videos. For more information, please follow other related articles on the PHP Chinese website!