Comment lire automatiquement la musique de fond dans les vidéos H5

Cette fois, je vais vous expliquer comment lire automatiquement la musique de fond dans la vidéo H5 , quelles sont les précautions pour lire automatiquement la musique de fond dans la vidéo H5, ce qui suit est un cas pratique , jetons un coup d'oeil Jetez un œil. L'

L'attribut de lecture automatique de la musique est également introduit ici :

<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>

L'attribut de lecture automatique stipule que la lecture commencera dès que l'audio est prêt.

Si cette propriété est définie, l'audio sera lu automatiquement.

Cependant, dans les applications réelles, nous rencontrons souvent le phénomène selon lequel la lecture automatique ne peut pas être lue, principalement parce que certains navigateurs ou téléphones mobiles bloquent ou ne prennent pas en charge l'attribut de lecture automatique. Ici, je vais présenter la méthode que j'utilise.

Tout d'abord : le code en html est le suivant

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

Utiliser le code suivant dans le fichier js

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

La plupart Les androïdes sont écrits ici Le téléphone peut essentiellement réaliser une lecture automatique, mais les téléphones Apple ne peuvent toujours pas le faire pour le moment

Ici, j'ai utilisé un bouton à ajouter à la page de chargement. Une fois le chargement terminé, cliquez. le bouton pour guider l'utilisateur pour compléter l'arrière-plan Le code pour la lecture automatique de la musique est le suivant :

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

À ce stade, la lecture automatique de la musique de fond est réalisée. Cette méthode convient aux projets. qui ont des pages de chargement et doivent cliquer pour entrer h5...

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

H5 implémente une animation de chemin personnalisé dans Canvas

Comment appeler l'APP dans la page H5

Utilisez Canvas pour obtenir l'effet de barrage dans les vidéos

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!