Cara menangani "Tidak tertangkap (dalam janji) DOMException: play () gagal karena pengguna tidak berinteraksi dengan dokumen terlebih dahulu." di Desktop dengan Chrome 66?

Saya mendapatkan pesan kesalahan ..

Tidak tertangkap (dalam janji) DOMException: play () gagal karena pengguna tidak berinteraksi dengan dokumen terlebih dahulu.

..ketika mencoba memutar video di desktop menggunakan Chrome versi 66.

Saya menemukan iklan yang mulai diputar secara otomatis di situs web, namun menggunakan HTML berikut:

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

Jadi adalah oleh-melewati Chrome V66 ini blocker autoplay benar-benar semudah menambahkan webkit-playsinline="true", playsinline="true", dan autoplay=""atribut ke <video>elemen? Apakah ada konsekuensi negatifnya?

Untuk membuat putar otomatis pada elemen html 5 berfungsi setelah pembaruan chrome 66 Anda hanya perlu menambahkan mutedproperti ke elemen video.

Jadi HTML video Anda saat ini

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

Hanya perlu 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>

Saya yakin pembaruan chrome 66 mencoba menghentikan tab yang membuat kebisingan acak pada tab pengguna. Itulah mengapa properti tanpa suara membuat putar otomatis berfungsi kembali.

Solusi terbaik yang saya temukan adalah menonaktifkan video

HTML

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

1. Buka chrome://settings/content/sound
2. Pengaturan Tidak diperlukan gerakan pengguna
3. Luncurkan ulang Chrome

Menjawab pertanyaan yang
ada ... Tidak, tidak cukup hanya memiliki atribut ini, untuk dapat memutar otomatis media dengan audio, Anda harus memiliki isyarat pengguna yang terdaftar pada dokumen Anda.

Namun, batasan ini sangat lemah: jika Anda memang menerima isyarat pengguna ini di dokumen induk, dan video Anda dimuat dari iframe, maka Anda dapat memutarnya ...

Jadi ambil contoh biola ini , yang hanya

<video src="myvidwithsound.webm" autoplay=""></video>

Saat pertama kali dimuat, dan jika Anda tidak mengklik di mana pun, itu tidak akan berjalan, karena kami belum memiliki acara apa pun yang terdaftar.
Tetapi begitu Anda mengklik tombol "Jalankan" , maka dokumen induk (jsfiddle.net) menerima isyarat pengguna, dan sekarang video diputar, meskipun secara teknis dimuat dalam dokumen yang berbeda.

Tetapi cuplikan berikut, karena mengharuskan Anda untuk benar-benar mengeklik tombol Jalankan cuplikan kode , akan diputar otomatis.

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

Artinya, iklan Anda mungkin dapat diputar karena Anda memberikan isyarat pengguna ke halaman utama.

Sekarang, perhatikan bahwa Safari dan Chrome Seluler memiliki aturan yang lebih ketat daripada itu, dan akan meminta Anda untuk benar-benar memicu setidaknya sekali play()metode secara terprogram pada elemen <video>atau <audio>dari penangan kejadian pengguna itu sendiri.

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>

Dan jika Anda tidak membutuhkan audionya, maka cukup tidak melampirkannya ke media Anda, video dengan hanya trek video juga diizinkan untuk diputar otomatis, dan akan mengurangi penggunaan bandwidth pengguna Anda.

Bagi saya (dalam proyek Angular) kode ini membantu:

Di HTML Anda harus menambahkan autoplay muted

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

Coba gunakan lisentner acara mousemove

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

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

Perluas Elemen DOM, Tangani Kesalahan, dan Turunkan dengan Baik

Di bawah ini saya menggunakan fungsi prototipe untuk membungkus fungsi bermain DOM asli, mengambil janjinya, dan kemudian menurunkan ke tombol putar jika browser membuat pengecualian. Ekstensi ini mengatasi kekurangan browser dan plug-n-play di halaman mana pun yang memiliki pengetahuan tentang elemen target.

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

Dalam kasus saya, saya harus melakukan ini

 // 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 membutuhkan interaksi pengguna agar video dapat diputar secara otomatis atau diputar melalui js (video.play ()). Tetapi interaksinya bisa dalam bentuk apa pun, kapan saja. Jika Anda hanya mengklik acak di halaman, video akan diputar otomatis. Saya menyelesaikannya kemudian, menambahkan tombol (hanya di browser chrome) yang bertuliskan "aktifkan putar otomatis video". Tombol tidak melakukan apa-apa, tetapi hanya mengkliknya, merupakan interaksi pengguna yang diperlukan untuk video selanjutnya.

Saya mengalami kesalahan yang serupa dengan saat mencoba memutar file audio. Pada awalnya, itu berfungsi, lalu berhenti bekerja ketika saya mulai menggunakan markForCheckmetode ChangeDetector dalam fungsi yang sama untuk memicu render ulang ketika sebuah janji terselesaikan (saya memiliki masalah dengan rendering tampilan).

Ketika saya mengubahnya markForCheckmenjadi detectChangesitu mulai bekerja lagi. Saya benar-benar tidak dapat menjelaskan apa yang terjadi, saya hanya berpikir untuk meletakkan ini di sini, mungkin itu akan membantu seseorang.

Anda harus menambahkan mutedatribut di dalam videoElementagar kode Anda berfungsi seperti yang diharapkan. Lihat di bawah ..

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

Jangan lupa untuk menambahkan link video yang valid sebagai sumber

Saya mengalami beberapa masalah saat bermain di Ponsel Android. Setelah beberapa kali mencoba, saya menemukan bahwa saat Penghemat Data aktif, tidak ada pemutaran otomatis:

Tidak ada putar otomatis jika mode Penghemat Data diaktifkan. Jika mode Penghemat Data diaktifkan, putar otomatis dinonaktifkan di setelan Media.

Sumber

Ketik Chrome: // flags di bilah alamat

Cari: Putar Otomatis

Kebijakan Putar Otomatis

Kebijakan yang digunakan saat memutuskan apakah audio atau video diizinkan untuk diputar otomatis.

- Mac, Windows, Linux, Chrome OS, Android

Setel ini ke " Tidak ada isyarat pengguna yang diperlukan "

Luncurkan ulang Chrome dan Anda tidak perlu mengubah kode apa pun