So spielen Sie automatisch Hintergrundmusik in H5-Videos ab

Dieses Mal werde ich Ihnen zeigen, wie Sie automatisch Hintergrundmusik in H5--Videos abspielen und welche Vorsichtsmaßnahmen es gibt, um automatisch Hintergrundmusik in H5-Videos abzuspielen. Das Folgende ist ein praktischer Fall , lass uns einen Blick darauf werfen. Schau mal. Auch das

Music-AutoplayAttribut wird hier eingeführt: Das

<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-Attribut legt fest, dass die Wiedergabe beginnt, sobald das Audio fertig ist.

Wenn diese Eigenschaft festgelegt ist, wird der Ton automatisch abgespielt.

In tatsächlichen Anwendungen stoßen wir jedoch häufig auf das Phänomen, dass Autoplay nicht abgespielt werden kann, hauptsächlich weil einige Browser oder Mobiltelefone das Autoplay-Attribut blockieren oder nicht unterstützen. Hier werde ich die von mir verwendete Methode vorstellen.

Zuallererst: Der Code in HTML lautet wie folgt

<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="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

Verwenden Sie den folgenden Code in der js-Datei

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")
}
}
})

Am meisten Androids werden hier geschrieben. Das Telefon kann grundsätzlich die automatische Wiedergabe realisieren, aber Apple-Telefone können dies derzeit noch nicht.

Hier habe ich eine Schaltfläche verwendet, um sie der Ladeseite hinzuzufügen. Wenn der Ladevorgang abgeschlossen ist, klicken Sie darauf Die Schaltfläche, um den Benutzer zum Vervollständigen der Hintergrundmusik zu führen, lautet der Code wie folgt:

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

An diesem Punkt wird die automatische Wiedergabe von Hintergrundmusik realisiert. Diese Methode ist für Projekte geeignet mit Ladeseiten und müssen klicken, um h5 einzugeben...

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5 implementiert benutzerdefinierte Pfadanimationen in Canvas

So rufen Sie APP auf der H5-Seite auf

Verwenden Sie Canvas, um den Sperreffekt in Videos zu erzielen

Das obige ist der detaillierte Inhalt vonSo spielen Sie automatisch Hintergrundmusik in H5-Videos ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!