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?
Jawaban:
Untuk membuat putar otomatis pada elemen html 5 berfungsi setelah pembaruan chrome 66 Anda hanya perlu menambahkan
muted
properti ke elemen video.Jadi HTML video Anda saat ini
Hanya perlu
muted="muted"
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.
sumber
mute
atribut atau atribut pengaturanvolume
tidak membantu.src
tidak valid. Saya telah memperbarui cuplikansrc
sehingga video diputar otomatis.muted="true"
sebaliknyaSolusi terbaik yang saya temukan adalah menonaktifkan video
HTML
sumber
chrome://settings/content/sound
sumber
--autoplay-policy=no-user-gesture-required
adalah cara terprogram untuk mencapai pengaturan ini.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
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.
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.Tampilkan cuplikan kode
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.
sumber
Bagi saya (dalam proyek Angular) kode ini membantu:
Di HTML Anda harus menambahkan
autoplay muted
Di JS / TS
sumber
@ViewChild()
Anda perlu menyetel opsi statis ke true:@ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef;
video: HTMLVideoElement;
Lalu:this.video = this.videoplayer.nativeElement;
@ngOnInit()
Coba gunakan lisentner acara mousemove
sumber
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.
sumber
Dalam kasus saya, saya harus melakukan ini
sumber
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.
sumber
Saya mengalami kesalahan yang serupa dengan saat mencoba memutar file audio. Pada awalnya, itu berfungsi, lalu berhenti bekerja ketika saya mulai menggunakan
markForCheck
metode ChangeDetector dalam fungsi yang sama untuk memicu render ulang ketika sebuah janji terselesaikan (saya memiliki masalah dengan rendering tampilan).Ketika saya mengubahnya
markForCheck
menjadidetectChanges
itu 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.sumber
Anda harus menambahkan
muted
atribut di dalamvideoElement
agar kode Anda berfungsi seperti yang diharapkan. Lihat di bawah ..Jangan lupa untuk menambahkan link video yang valid sebagai sumber
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
sumber
Ketik Chrome: // flags di bilah alamat
Cari: Putar Otomatis
Setel ini ke " Tidak ada isyarat pengguna yang diperlukan "
Luncurkan ulang Chrome dan Anda tidak perlu mengubah kode apa pun
sumber