"Uncaught (in promise) DOMException : 사용자가 먼저 문서와 상호 작용하지 않았기 때문에 play () 실패했습니다."를 처리하는 방법 Chrome 66이 설치된 데스크톱에서?

오류 메시지가 표시됩니다 ..

잡히지 않은 (약속에서) 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>

1. 열다 chrome://settings/content/sound
2. 설정 사용자 제스처가 필요하지 않습니다.
3. 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>요소에서 프로그래밍 방식으로 메소드를 한 번 이상 실제로 트리거해야 합니다.

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};

<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

오디오가 필요하지 않은 경우 미디어에 첨부하지 마십시오. 비디오 트랙 만있는 비디오도 자동 재생이 허용되어 사용자의 대역폭 사용량을 줄일 수 있습니다.

나를 위해 (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>

제 경우에는 이렇게해야했습니다

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

Chrome에서 js (video.play ())를 통해 동영상을 자동 재생하거나 재생하려면 사용자 상호 작용이 필요합니다. 그러나 상호 작용은 언제든지 어떤 종류의 것일 수 있습니다. 페이지에서 무작위로 클릭하면 동영상이 자동 재생됩니다. 그런 다음 "동영상 자동 재생 활성화"라는 버튼 (크롬 브라우저에만 해당)을 추가하여 해결했습니다. 버튼은 아무 작업도 수행하지 않지만 클릭하기 만하면 추가 비디오에 필요한 사용자 상호 작용입니다.

오디오 파일을 재생하는 동안와 유사한 오류가 발생했습니다. 처음에는 작동 중이었고 markForCheck약속이 해결되면 다시 렌더링을 트리거하기 위해 동일한 기능에서 ChangeDetector의 메서드를 사용하기 시작했을 때 작동이 중지되었습니다 (보기 렌더링에 문제가 있음).

내가 변경하는 경우 markForCheck에 detectChanges그것을 다시 일하기 시작했다. 무슨 일이 일어 났는지 정말 설명 할 수 없습니다. 그냥 여기에 놓아 두는 생각이 들었습니다. 아마도 누군가를 도울 것입니다.

예상대로 코드 작업을 위해 muted내부 에 속성 을 추가해야합니다 videoElement. 우는 소리 ..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

유효한 비디오 링크를 소스로 추가하는 것을 잊지 마십시오

Android Phone에서 재생하는 데 문제가 있습니다. 몇 번의 시도 끝에 데이터 세이버가 켜져있을 때 자동 재생이 없다는 것을 알았습니다.

데이터 세이버 모드가 활성화 된 경우 자동 재생이 없습니다 . 데이터 세이버 모드가 활성화 된 경우 미디어 설정에서 자동 재생이 비활성화됩니다.

출처

주소 표시 줄에 Chrome : // flags 를 입력 합니다.

검색 : 자동 재생

자동 재생 정책

오디오 또는 비디오의 자동 재생 허용 여부를 결정할 때 사용되는 정책입니다.

– Mac, Windows, Linux, Chrome OS, Android

"이 설정 에는 사용자의 제스처가 필요하지 않습니다 "

Chrome을 다시 시작하면 코드를 변경할 필요가 없습니다.