HTML5는 배경 음악의 자동 재생을 구현합니다.

王林
풀어 주다: 2020-12-02 14:35:27
앞으로
15688명이 탐색했습니다.

HTML5는 배경 음악의 자동 재생을 구현합니다.

Autoplay 속성:

(권장 튜토리얼:html5 비디오 튜토리얼)

로그인 후 복사

autoplay 속성은 오디오가 준비되는 즉시 재생을 시작하도록 지정합니다. 이 속성이 설정되면 오디오가 자동으로 재생됩니다.

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

먼저 html에 있는 코드는 다음과 같습니다

   
로그인 후 복사

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") } } })
로그인 후 복사

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

여기서 로딩 페이지에 추가하는 버튼을 사용했습니다. 로딩이 완료되면 버튼을 클릭하여 사용자에게 배경 음악 자동 재생을 완료하도록 안내합니다.

$("html").one('touchstart',function(){ audio.play(); })
로그인 후 복사

이 시점에서 배경 음악 자동 재생이 구현됩니다. 로딩 페이지가 있으며 h5 프로젝트에 들어가려면 클릭해야 합니다.

관련 추천:h5

위 내용은 HTML5는 배경 음악의 자동 재생을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!