Как обработать «Неперехваченное (в обещании) исключение DOMException: play () не удалось, потому что пользователь сначала не взаимодействовал с документом». на рабочем столе с Chrome 66?


122

Я получаю сообщение об ошибке ..

Неперехваченное (в обещании) 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>элементу? Есть ли у этого какие-то негативные последствия?


2
Я думаю, что playsinline - вещь iOS.
Джош Ли,

Ответы:


126

Чтобы автозапуск на элементах 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 снова заставляет автовоспроизведение.


после выдергивания волос в течение часа. это
Энди МакКормик

Есть ли способ включить звук сразу после начала воспроизведения видео? Удаление muteатрибута или настройки volumeатрибута не помогает.
nikitahl

В MacOs Chrome версии 74.0.3729.131 оба фрагмента показывают черный экран
Камил Келчевский,

@ KamilKiełczewski На видео был черный экран, потому что он srcбыл недействителен. Я обновил фрагмент, srcпоэтому видео воспроизводится автоматически.
Джо

2
Я должен был сделать muted="true"вместо этого
tgordon18

13

Лучшее решение, которое я обнаружил, - отключить видео

HTML

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

13
  1. открыто chrome://settings/content/sound
  2. Настройка Никаких жестов пользователя не требуется
  3. Перезапустить Chrome

6
Изменения политики автозапуска. Щелкни меня
Мин

4
Он используется только разработчиком для локальной проверки поведения политики автоматического воспроизведения Chrome. developers.google.com/web/updates/2017/09/…
Туан Нгуен

5
Я обнаружил, что флаг командной строки --autoplay-policy=no-user-gesture-required- это программный способ достижения этого параметра.
nickiaconis

27
Это работает только для вашего браузера, все остальные по-прежнему будут затронуты
koosa

40
Кто поддерживает этот ответ? Это не superuser.com. Решение для вашей локальной машины не может быть приемлемым ответом.
adripanico 01

11

Отвечая на поставленный вопрос ...
Нет, недостаточно иметь эти атрибуты, чтобы иметь возможность автоматически воспроизводить мультимедиа со звуком, вам нужно зарегистрировать пользовательский жест в вашем документе.

Но это ограничение очень слабое: если вы получили этот пользовательский жест в родительском документе, и ваше видео было загружено из 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>из самого обработчика пользовательских событий.

А если вам не нужен звук, просто не прикрепляйте его к своему мультимедиа, видео только с видеодорожкой также может автоматически воспроизводиться, что снизит использование полосы пропускания вашим пользователем.


11

Мне (в проекте 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();
}

1
Совершенно верно и невероятно, даже с последней версией Angular Ng8. Angular просто не волнует, что происходит в HTML-шаблоне компонента!
Педро Феррейра

2
И с новым способом использования Angular @ViewChild()вам нужно установить для параметра sttatic значение true: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; А затем: this.video = this.videoplayer.nativeElement;@ngOnInit()
Педро Феррейра

1
Это была моя проблема, отключение звука в HTML полностью игнорируется, и мне пришлось принудительно использовать JS. +1 млн к вашему ответу после нескольких дней поисков
Игнасио Бустос

Это правильный ответ в моем случае, сработал отлично
Гарри. Наим

Вау, не могу поверить, что мне действительно нужно было отключение звука на стороне javascript для представлений Angular SSR после загрузки. Все это время я думал, что проблема в HTML.
arao6,

7

Попробуйте использовать прослушиватель событий mousemove

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

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

4

Расширение элемента 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>

Это очень умный подход, который не нарушает никаких политик (поскольку воспроизведение все равно не запускается) и предотвращает появление ошибок. +1
loretoparisi

3

В моем случае мне пришлось это сделать

 // 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();

2

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


1

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

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


1

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

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

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


0

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

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

Источник


-6

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

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

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

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

- Mac, Windows, Linux, Chrome OS, Android

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

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


24
Вы не можете попросить каждого пользователя изменить настройки.
Ашиш Джанвар

2
Это могло бы решить проблему для некоторых людей (киосков, частных и локальных веб-сайтов ...), но флаг был удален в Chrome 76. Теперь единственное решение - это ответ
Милан Швехла
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.