H5 동영상에서 배경음악을 자동으로 재생하는 방법

이번에는 H5동영상에서 배경음악을 자동으로 재생하는 방법과 H5동영상에서 배경음악을 자동으로 재생하기 위한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

음악의 자동 재생속성도 여기에 소개되어 있습니다.

<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 속성은 오디오가 준비되는 즉시 재생이 시작되도록 규정합니다.

이 속성을 설정하면 오디오가 자동으로 재생됩니다.

그러나 실제 응용 프로그램에서는 주로 일부 브라우저나 휴대폰에서 자동 재생 속성을 차단하거나 지원하지 않기 때문에 자동 재생이 발생하지 않는 현상이 자주 발생합니다. 여기서는 제가 사용하는 방법을 소개하겠습니다.

먼저 html의 코드는 다음과 같습니다.

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

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

이렇게 작성하고 나면 대부분의 안드로이드폰에서는 기본적으로 자동재생이 가능하지만, 애플폰에서는 여전히 불가능합니다. 이때

로딩이 완료되면 버튼을 클릭하여 배경음악 자동 재생을 완료하도록 안내합니다.

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

여기서. 포인트, 배경 음악 자동 재생이 구현됩니다. 이 방법은 로딩 페이지가 있고 h5를 입력하기 위해 클릭해야 하는 프로젝트에 적합합니다...

사례를 읽으신 후 이 방법을 마스터하셨으리라 믿습니다. 이 기사에서 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

H5는 캔버스에서 사용자 정의 경로 애니메이션을 구현합니다

H5 페이지에서 APP를 호출하는 방법

캔버스를 사용하여 비디오에서 사격 효과를 얻습니다

위 내용은 H5 동영상에서 배경음악을 자동으로 재생하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!