"Uncaught (in promise) DOMException : 사용자가 문서와 먼저 상호 작용하지 않았기 때문에 play () 실패했습니다."를 처리하는 방법

"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 업데이트가 사용자 탭에서 임의의 소음을 만드는 탭을 중지하려고한다고 생각합니다. 이것이 음소거 속성이 자동 재생을 다시 작동하게하는 이유입니다.

---

1. 열다 chrome://flags/#autoplay-policy
2. 설정 사용자 제스처가 필요하지 않습니다.
3. Chrome 다시 시작

---

내가 찾은 최고의 해결책은 비디오를 음소거하는 것입니다

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

---

당면한 질문에 답하는 중 ...
아니요, 이러한 속성을 갖는 것만으로는 충분하지 않습니다. 오디오가 포함 된 미디어를 자동 재생하려면 문서에 사용자 제스처를 등록해야합니다.

그러나이 제한은 매우 약합니다. 상위 문서에서이 사용자 제스처를 수신하고 동영상이 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>

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

---

mousemove 이벤트 lisentner를 사용해보십시오

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

---

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

---

최신 정보

If this technique does not work any more - there is another option. You can include a short and very quiet (-60db) audio and play it inside the click handler of the hidden button. After that, all other audio/video files will be allowed to play without a direct user interaction. You can take a silent audio from http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav and cut it to half a second (or less).

---

There is a very easy solution - just add a BUTTON to your page, style it to be invisible and then call button.click() method before the play()

Runs like a charm in Chromium Version 70.0.3538.67 (Official Build) (64-bit)

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}

<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>

---

I had some issues playing on Android Phone. After few tries I found out that when Data Saver is on there is no auto play:

There is no autoplay if Data Saver mode is enabled. If Data Saver mode is enabled, autoplay is disabled in Media settings.

Source

---

Chrome needs a user interaction for the video to be autoplayed or played via js (video.play()). But the interaction can be of any kind, in any moment. If you just click random on the page, the video will autoplay. I resolved then, adding a button (only on chrome browsers) that says "enable video autoplay". The button does nothing, but just clicking it, is the required user interaction for any further video.

---

I encountered a similar error with while attempting to play an audio file. At first, it was working, then it stopped working when I started using ChangeDetector's markForCheck method in the same function to trigger a re-render when a promise resolves (I had an issue with view rendering).

When I changed the markForCheck to detectChanges it started working again. I really can't explain what happened, I just thought of dropping this here, perhaps it would help someone.

---

You should have added muted attribute inside your videoElement for your code work as expected. Look bellow ..

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

Don' t forget to add a valid video link as source

---

Extend the DOM Element, Handle the Error, and Degrade Gracefully

Below I use the prototype function to wrap the native DOM play function, grab its promise, and then degrade to a play button if the browser throws an exception. This extension addresses the shortcoming of the browser and is plug-n-play in any page with knowledge of the target element(s).

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

---

Type Chrome://flags in the address-bar

Search: Autoplay

Autoplay Policy

Policy used when deciding if audio or video is allowed to autoplay.

– Mac, Windows, Linux, Chrome OS, Android

Set this to "No user gesture is required"

Relaunch Chrome and you don't have to change any code

참고URL : https://stackoverflow.com/questions/49930680/how-to-handle-uncaught-in-promise-domexception-play-failed-because-the-use