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

Ответ 1

Чтобы заставить автозапуск на элементах html 5 работать после обновления chrome 66, вам просто нужно добавить свойство 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>

Ответ 2

1. Open chrome://flags/#autoplay-policy
2. Настройка Пользовательский жест не требуется
3. Перезапустить Chrome

Ответ 3

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

HTML

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

Ответ 4

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

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

Ответ 5

Попробуйте использовать MouseMove Event lisentner

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

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

Ответ 6

Для меня (в проекте Angular) этот код помог:

В HTML вы должны добавить autoplay muted

В JS/TS

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it not working although I have "muted" in HTML
    media.play();
}

Ответ 7

ОБНОВИТЬ

Если этот метод больше не работает, есть другой вариант. Вы можете включить короткий и очень тихий звук -60db и воспроизвести его внутри обработчика щелчка скрытой кнопки. После этого всем другим аудио/видео файлам будет разрешено играть без прямого взаимодействия с пользователем. Вы можете сделать тихий звук с http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav и разрезать его на полсекунды (или меньше).

Существует очень простое решение - просто добавьте КНОПКУ на свою страницу, создайте ее невидимым, а затем вызовите button.click() перед play()

Выполняется как charm в Chromium Version 70.0.3538.67 (Official Build) (64-разрядная версия)

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>

Ответ 8

Обратите внимание, что приглушенный автозапуск всегда разрешен. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Ответ 9

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

Автовоспроизведения нет, если включен режим Data Saver. Если включен режим сохранения данных, автозапуск отключен в настройках "Медиа".

Источник

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

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

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

Ответ 14

попробуй это! автозапуск после взаимодействия с пользователем.

https://gist.github.com/seunggabi/d939d8b659acc6cc68849857856bd772

Ответ 15

Введите Chrome://флаги в адресной строке

Поиск: Автовоспроизведение

Политика автовоспроизведения

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

- Mac, Windows, Linux, Chrome OS, Android

Установите для этого значение " Нет жестов пользователя "

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