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

122

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?

Steven
sumber
2
Saya pikir playsinline adalah hal iOS.
Josh Lee

Jawaban:

125

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.

Joe
sumber
setelah menarik rambut saya selama satu jam. ini memperbaiki masalah saya
Andy McCormick
Apakah ada cara untuk mengaktifkan audio segera setelah video mulai diputar? Menghapus muteatribut atau atribut pengaturan volumetidak membantu.
nikitahl
Pada MacOs Chrome Versi 74.0.3729.131 kedua cuplikan memberikan layar hitam
Kamil Kiełczewski
@ KamilKiełczewski Video ini menampilkan layar hitam karena srctidak valid. Saya telah memperbarui cuplikan srcsehingga video diputar otomatis.
Joe
2
Aku harus melakukan muted="true"sebaliknya
tgordon18
13

Solusi terbaik yang saya temukan adalah menonaktifkan video

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
Moiz
sumber
12
  1. Buka chrome://settings/content/sound
  2. Pengaturan Tidak diperlukan gerakan pengguna
  3. Luncurkan ulang Chrome
Ming
sumber
6
Perubahan Kebijakan Putar Otomatis. Klik saya
Ming
4
Ini hanya digunakan untuk pengembang untuk menguji perilaku kebijakan putar otomatis Chrome secara lokal. developers.google.com/web/updates/2017/09/…
Tuan Nguyen
5
Saya menemukan bahwa bendera baris perintah --autoplay-policy=no-user-gesture-requiredadalah cara terprogram untuk mencapai pengaturan ini.
nickiaconis
27
Ini hanya berfungsi untuk browser Anda, semua orang lainnya masih akan terpengaruh
koosa
39
Siapa yang mendukung jawaban ini? Ini bukan superuser.com. Solusi untuk mesin lokal Anda tidak dapat menjadi jawaban yang dapat diterima.
adripanico
11

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.

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.

Kaiido
sumber
11

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();
}
Eutrepe
sumber
1
Benar-benar benar dan sulit dipercaya, bahkan dengan Ng8, versi Angular terbaru. Angular sama sekali tidak peduli tentang apa yang terjadi pada template HTML komponen!
Pedro Ferreira
2
Dan, dengan cara penggunaan Angular yang baru, @ViewChild()Anda perlu menyetel opsi statis ke true: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; Lalu: this.video = this.videoplayer.nativeElement;@ngOnInit()
Pedro Ferreira
1
Ini adalah masalah saya, diredam dalam HTML benar-benar diabaikan dan saya harus memaksanya oleh JS. +1 juta untuk jawaban Anda setelah pencarian berhari-hari
Ignacio Bustos
Ini adalah jawaban yang tepat dalam kasus saya, bekerja dengan sempurna
Harry .Naeem
Wow, tidak percaya saya benar-benar membutuhkan pembungkaman sisi javascript untuk tampilan pasca-pemuatan Angular SSR. Selama ini, saya pikir HTML-lah masalahnya.
arao6
7

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()
})
時 雨 初
sumber
4

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>
Bernesto
sumber
Ini adalah pendekatan yang sangat cerdas, yang tidak melanggar kebijakan apa pun (karena pemutaran tidak dimulai lagi), dan mencegah terjadinya kesalahan. +1
loretoparisi
3

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();
Shobi
sumber
2

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.

Alarik
sumber
1

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.

Raja James Enejo
sumber
1

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

DOMINIK GNETO
sumber
0

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

Ido
sumber
-6

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

DARKSETH23
sumber
24
Anda tidak mungkin meminta setiap pengguna untuk mengubah pengaturan.
Ashish Jhanwar
2
Ini sebenarnya bisa menyelesaikan masalah bagi sebagian orang (kios, situs web pribadi dan lokal ...), tetapi benderanya telah dihapus di Chrome 76. Sekarang satu-satunya solusi adalah jawaban ini
Milan Švehla