오류 메시지가 표시됩니다 ..
잡히지 않은 (약속에서) DOMException : 사용자가 먼저 문서와 상호 작용하지 않았기 때문에 play ()가 실패했습니다.
..Chrome 버전 66을 사용하여 데스크톱에서 동영상을 재생하려고 할 때.
웹 사이트에서 자동으로 재생되는 광고를 찾았지만 다음 HTML을 사용했습니다.
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
autoplay=""></video>그래서으로 통과 한 쉽게 바로 추가 정말 크롬 V66의 자동 재생 차단제이다 webkit-playsinline="true", playsinline="true"하고 autoplay=""받는 특성을 <video>요소? 이것에 부정적인 결과가 있습니까?
답변
chrome 66 업데이트 후 html 5 요소에서 자동 재생이 작동 muted하도록하려면 video 요소에 속성을 추가하기 만하면 됩니다.
따라서 현재 동영상 HTML
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
autoplay=""></video>그냥 필요 muted="muted"
<video
title="Advertisement"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
autoplay="true"
muted="muted"></video>나는 크롬 66 업데이트가 사용자 탭에서 임의의 소음을 만드는 탭을 중지하려고한다고 생각합니다. 이것이 muted 속성이 자동 재생을 다시 작동하게하는 이유입니다.
답변
내가 찾은 최고의 솔루션은 비디오를 음소거하는 것입니다
HTML
<video loop muted autoplay id="videomain">
<source src="videoname.mp4" type="video/mp4">
</video>답변
- 열다
chrome://settings/content/sound - 설정 사용자 제스처가 필요하지 않습니다.
- Chrome 다시 시작
답변
당면한 질문에 답하는 중 …
아니요, 이러한 속성을 갖는 것만으로는 충분하지 않습니다. 오디오가있는 미디어를 자동 재생하려면 문서에 사용자 제스처를 등록해야합니다.
그러나이 제한은 매우 약합니다. 상위 문서에서이 사용자 제스처를 수신하고 동영상이 iframe에서로드 된 경우 재생할 수 있습니다.
그래서 예를 들어 가지고 이 바이올린 아니라,
<video src="myvidwithsound.webm" autoplay=""></video>처음로드 할 때 아무 곳도 클릭하지 않으면 아직 등록 된 이벤트가 없기 때문에 실행되지 않습니다.
그러나 일단 “실행” 버튼 을 클릭하면 상위 문서 (jsfiddle.net)가 사용자 제스처를 수신하고 기술적으로 다른 문서에로드되어 있어도 비디오가 재생됩니다.
그러나 다음 스 니펫은 실제로 코드 스 니펫 실행 버튼을 클릭해야하므로 자동 재생됩니다.
<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>이는 기본 페이지에 사용자 제스처를 제공했기 때문에 광고가 재생 될 수 있음을 의미합니다.
이제 Safari와 Mobile Chrome에는 그보다 더 엄격한 규칙이 있으며 사용자 이벤트 핸들러 자체 play()의 <video>또는 <audio>요소에서 프로그래밍 방식으로 메소드를 한 번 이상 실제로 트리거해야 합니다.
오디오가 필요하지 않은 경우 미디어에 첨부하지 마십시오. 비디오 트랙 만있는 비디오도 자동 재생이 허용되어 사용자의 대역폭 사용량을 줄일 수 있습니다.
답변
나를 위해 (Angular 프로젝트에서)이 코드가 도움이되었습니다.
HTML에서 다음을 추가해야합니다. autoplay muted
JS / TS에서
playVideo() {
const media = this.videoplayer.nativeElement;
media.muted = true; // without this line it's not working although I have "muted" in HTML
media.play();
}답변
mousemove 이벤트 lisentner를 사용해보십시오
var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"
document.body.addEventListener("mousemove", function () {
audio.play()
})답변
DOM 요소를 확장하고, 오류를 처리하고, 적절하게 저하
아래에서는 프로토 타입 함수를 사용하여 네이티브 DOM 재생 함수를 래핑하고 약속을 잡고 브라우저에서 예외가 발생하면 재생 버튼으로 저하됩니다. 이 확장은 브라우저의 단점을 해결하고 대상 요소에 대한 지식이있는 모든 페이지에서 플러그 앤 플레이입니다.
// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
var audio = this,
args = arguments,
promise = play.apply(audio, args);
if (promise !== undefined) {
promise.catch(_ => {
// Autoplay was prevented. This is optional, but add a button to start playing.
var el = document.createElement("button");
el.innerHTML = "Play";
el.addEventListener("click", function(){play.apply(audio, args);});
this.parentNode.insertBefore(el, this.nextSibling)
});
}
};
})(Audio.prototype.play);
// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()
<!-- HTML -->
<audio id="MyAudioElement" autoplay>
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>