Как обработать «Неперехваченное (в обещании) исключение 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>

Так обходя автовоспроизведение блокировщика Chrome V66 действительно так просто , как добавление webkit-playsinline="true", playsinline="true"и autoplay=""атрибутов к <video>элементу? Есть ли у этого какие-то негативные последствия?

Чтобы автозапуск на элементах html 5 работал после обновления chrome 66, вам просто нужно добавить mutedсвойство к элементу видео.

Итак, ваш текущий 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>

Я считаю, что обновление Chrome 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

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 ()). Но взаимодействие может быть любым, в любой момент. Если вы просто нажмете на странице случайным образом, видео запустится автоматически. Я решил тогда, добавив кнопку (только в браузерах Chrome), которая говорит «включить автовоспроизведение видео». Кнопка ничего не делает, но простое нажатие на нее - необходимое взаимодействие с пользователем для любого дальнейшего видео.

Я столкнулся с аналогичной ошибкой при попытке воспроизвести аудиофайл. Сначала он работал, затем он перестал работать, когда я начал использовать markForCheckметод ChangeDetector в той же функции для запуска повторного рендеринга при разрешении обещания (у меня была проблема с рендерингом представления).

Когда я изменил markForCheckк detectChangesней начал работать снова. Я действительно не могу объяснить, что произошло, я просто подумал, чтобы бросить это сюда, возможно, это кому-то поможет.

Вы должны были добавить mutedатрибут внутри videoElementвашего кода, как и ожидалось. Посмотрите ниже ..

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

Не забудьте добавить действительную ссылку на видео в качестве источника

У меня возникли проблемы с воспроизведением на телефоне Android. После нескольких попыток я обнаружил, что когда включена экономия данных, автоматического воспроизведения нет:

Если включен режим экономии трафика, автовоспроизведение отсутствует. Если включен режим экономии трафика, автовоспроизведение отключено в настройках мультимедиа.

Источник

Введите Chrome: // flags в адресной строке.

Поиск: Автозапуск

Политика автозапуска

Политика, используемая при принятии решения о разрешении автовоспроизведения аудио или видео.

- Mac, Windows, Linux, Chrome OS, Android

Установите для этого параметра « Жест пользователя не требуется ».

Перезапустите Chrome, и вам не придется менять код