Як попрацювати з "Uncaught (у перспективі) DOMException: play () не вдалося, оскільки користувач не взаємодів із документом спочатку". на робочому столі з Chrome 66?

Я отримую повідомлення про помилку ..

Uncaught (обіцяє) DOMException: play () не вдалося, оскільки користувач спочатку не взаємодіяв із документом.

..при спробі відтворити відео на робочому столі за допомогою версії 66 Chrome.

Я знайшов оголошення, яке почалося відтворення автоматично на веб-сайті, однак використовуючи наступний 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 намагається зупинити вкладки, створюючи випадковий шум на вкладках користувачів. Ось чому приглушене властивість змушує автовідтворення знову працювати.

Найкраще рішення, яке я знайшов, - це відключення відео

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

Спробуйте скористатись ліцензієм подій миші

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. Після кількох спроб я з'ясував, що коли Data Saver увімкнено, немає автоматичної гри:

Немає автоматичної гри, якщо ввімкнено режим Збереження даних . Якщо ввімкнено режим Збереження даних, автоматичне відключення відключено в налаштуваннях медіа.

Джерело

Введіть прапори Chrome: // в адресний рядок

Пошук: Автовідтворення

Політика автоматичної гри

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

- Mac, Windows, Linux, Chrome OS, Android

Установіть це на " Не потрібен жест користувача "

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