Pemutaran otomatis video tidak berfungsi di browser desktop Safari dan Chrome


135

Saya menghabiskan banyak waktu untuk mencoba mencari tahu mengapa video disematkan seperti di sini:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

mulai bermain secara otomatis setelah halaman dimuat di FireFox tetapi tidak dapat melakukan putar otomatis di browser berbasis Webkit. Ini hanya terjadi di beberapa halaman acak. Sejauh ini saya tidak dapat menemukan penyebabnya. Saya mencurigai beberapa tag yang tidak tertutup atau JS ekstensif yang dibuat oleh editor CMS.


apakah itu kadang-kadang berhasil? atau tidak berfungsi sama sekali ... berikut adalah contoh w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay yang saya periksa dengan chrome, dan berhasil.
tanaydin

Pada beberapa halaman itu tidak berfungsi sama sekali
Adam Bubela

Menghadapi masalah yang sama, bekerja dengan baik seminggu yang lalu dan tanpa perubahan apa pun itu berhenti berfungsi. Mungkin ini adalah pembaruan peramban, sangat menjengkelkan harus memutar semua tag video secara manual melalui javascript
bingeScripter

Tidak bekerja untuk saya di Chrome.
Bob the Builder

Jawaban:


261

Perbaikan terbaik yang bisa saya dapatkan adalah menambahkan kode ini tepat setelah </video>

<script>
    document.getElementById('vid').play();
</script>

... tidak cantik tapi entah bagaimana berhasil.

PERBARUI Akhir-akhir ini banyak browser hanya dapat memutar video secara otomatis tanpa suara, jadi Anda juga perlu menambahkan mutedatribut ke tag video

<video autoplay muted>
...
</video>

1
Atau Anda dapat membuat kode dengan jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…
Penguin

8
Atau seperti ini:$("video[autoplay]").each(function(){ this.play(); });
Martin

2
masih masalah jika tidak dibungkam developers.google.com/web/updates/2017/09/…
dovid

5
ini tidak akan berfungsi lagi tanpa interaksi pengguna AFAIK
webkit


94

Setelah menggunakan jQuery play()atau manipulasi DOM seperti yang disarankan oleh jawaban lain, itu tidak masih berfungsi (Video tidak diputar otomatis) di Chrome untuk Android (Versi 56.0).

Sesuai posting ini di developers.google.com , Dari Chrome 53, opsi putar otomatis dihormati oleh browser, jika video dibungkam .

Jadi, menggunakan autoplay mutedatribut dalam tag video memungkinkan video diputar otomatis di browser Chrome dari versi 53.

Kutipan dari tautan di atas:

Pemutaran otomatis tanpa suara untuk video didukung oleh Chrome untuk Android mulai versi 53. Pemutaran akan dimulai secara otomatis untuk elemen video setelah ditampilkan jika keduanya autoplaydan muteddisetel [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
  • Putar otomatis tanpa suara didukung oleh Safari di iOS 10 dan lebih baru.
  • Putar otomatis, baik dibungkam atau tidak, sudah didukung di Android oleh Firefox dan UC Browser: mereka tidak memblokir semua jenis putar otomatis.

3
Saya mengalami masalah ini di Safari 11 di mana video latar belakang (tidak ada audio) tidak dapat diputar secara otomatis. Menambah muteddan autoplaymelakukan trik. Terima kasih!
dmbaughman

1
Lalu mengapa putar otomatis, DENGAN suara aktif, berfungsi untuk youtube? Ini telah bekerja seperti itu sejak dimulainya situs.
Xavier

32

Kebetulan Safari dan Chrome di Desktop tidak menyukai manipulasi DOM di sekitar tag video. Mereka tidak akan mengaktifkan urutan pemutaran saat atribut putar otomatis disetel meskipun peristiwa canplaythrough telah diaktifkan saat DOM di sekitar tag video telah berubah setelah pemuatan halaman awal. Pada dasarnya saya memiliki masalah yang sama sampai saya menghapus .wrap () jQuery di sekitar tag video dan setelah itu diputar otomatis seperti yang diharapkan.


2
Panggilan bagus yang tidak bekerja dengan .wrap (). Namun, sejauh yang saya tahu, kode tersebut membutuhkan .get (0) agar berfungsi: $ ("# vid"). Get (0) .play ();
mattsoave

3
@mattsoave .get(0)atau hanya$('#vid')[0].play()
pmrotule

Okt 2017, video tidak berputar otomatis meskipun atribut dalam tag masih menjadi masalah di Safari. Menggunakan [0] .play () seperti yang disarankan oleh mattsoave / pmrotule menyelesaikan masalah.
Don Cullen

25

Google baru saja mengubah kebijakan mereka untuk video putar otomatis, itu harus muted

Anda bisa cek disini

jadi tambahkan saja dibungkam

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Komentar John Pallett tentang kebijakan baru . Dia adalah Manajer Produk dan Media Muter Google Chrome .
Doomjunky

24

Bagi saya masalahnya adalah mutedatribut itu perlu ditambahkan di dalam videotag. Yaitu:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Berfungsi untuk Chrome terbaru pada Windows8
vladkras

Di Crome jika saya menambahkan suara nonaktifkan yang dibungkam. Saya tidak ingin ini
lisarko8077

17

Chrome tidak mengizinkan pemutaran otomatis video dengan suara aktif, jadi pastikan untuk menambahkan muted atribut ke videotag seperti ini

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

3
Itu tidak menambahkan sesuatu yang baru. The jawaban yang diterima sudah menyebutkan ini. Juga jawaban kedua menjelaskan secara rinci.
Samuel Philipp

12

Saya baru saja mendapatkan masalah yang sama dengan video saya

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Setelah pencarian, saya menemukan solusi:

Jika saya menyetel atribut "preload" ke "true", video akan dimulai secara normal


Atribut preload diabaikan oleh browser jika ada autoplay.
Sedat Başar

9

Menambahkan kode di bawah ini di bagian bawah halaman berhasil untuk saya. Saya tidak tahu mengapa itu berhasil :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

2
alasannya adalah karena Anda menunggu video dimuat di dalam buffer lalu Anda memutarnya.
Joseph Briggs

9

Coba ini:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

5

var video = document.querySelector('video'); video.muted = true; video.play()

Hanya solusi ini yang membantu saya, <video autoplay muted ...>...</video>tidak berhasil ...


3

Tidak ada jawaban lain yang berhasil untuk saya. Solusi saya adalah memicu klik pada video itu sendiri; hacky (karena waktu tunggu yang diperlukan) tetapi berfungsi dengan baik:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Tidak ada yang berhasil di Chrome yang berhasil untuk saya. Dengan .play () fix (hack) di atas saya mendapatkan "DOMException Tidak Tertangkap (dalam janji): Permintaan play () diinterupsi oleh panggilan ke jeda ()." di konsol. Ada beberapa fungsi jQuery lainnya di halaman, jadi anggaplah bahwa pengatur waktu akan memberi Chrome cukup waktu untuk menyelesaikannya sendiri. Berhasil. Saya mengatur timer 0,5 detik di $ (dokumen) .ready ()
Dari Orbonia

3

Kami baru-baru ini mengatasi masalah serupa dengan video tersemat dan menemukan bahwa atribut autoplay dan tanpa suara tidak cukup untuk penerapan kami.

Kami menambahkan atribut "playsinline" ketiga ke kode dan memperbaiki masalah untuk pengguna iOS.

Perbaikan ini khusus untuk video yang akan diputar secara inline. Dari https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Di iPhone, elemen sekarang akan diizinkan untuk diputar sebaris, dan tidak akan secara otomatis memasuki mode layar penuh saat pemutaran dimulai. elemen tanpa atribut playsinline akan terus membutuhkan mode layar penuh untuk pemutaran di iPhone. Saat keluar dari layar penuh dengan gerakan mencubit, elemen tanpa garis putar akan terus diputar sebaris.



2

Coba ini:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

Ini adalah cara saya biasanya melakukannya. loop, kontrol, dan putar otomatis tidak memerlukan nilai karena merupakan atribut boolean.


2

Ini karena sekarang chrome mencegah pemutaran otomatis di video html5, jadi secara default mereka tidak mengizinkan pemutaran otomatis. jadi kita bisa mengubah pengaturan ini menggunakan pengaturan bendera chrome. ini tidak mungkin untuk kasus normal jadi saya telah menemukan solusi lain. ini bekerja dengan sempurna ... (tambahkan preload = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

2

Menghabiskan dua jam mencoba semua solusi yang disebutkan di atas.

Inilah yang akhirnya berhasil untuk saya:

var vid = document.getElementById("myVideo");
vid.muted = true;

1

Pada Safari Iphone saat mentega hampir habis dan iphone dalam Mode Daya Rendah, iPhone tidak akan diputar otomatis, meskipun Anda memiliki atribut berikut: putar otomatis, putar, diredam, putarinline yang disetel pada tag html video Anda.

Berjalan-jalan Saya menemukan berfungsi adalah memiliki acara gerakan pengguna untuk memicu pemutaran video:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

Anda dapat membaca lebih lanjut tentang gerakan pengguna dan Kebijakan Video untuk iOS di situs webkit:

https://webkit.org/blog/6784/new-video-policies-for-ios/


0

Saya punya kasus di mana itu ada hubungannya dengan urutan tipe file yang berbeda. Cobalah untuk mengubahnya dan lihat apakah itu membantu.


0

Saya mulai dengan memutar semua video yang terlihat, tetapi ponsel lama tidak bekerja dengan baik. Jadi sekarang saya memutar satu video yang paling dekat dengan bagian tengah jendela dan menghentikan sisanya. Vanilla JS. Anda dapat memilih algoritme mana yang Anda sukai.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

0

Saya memecahkan masalah yang sama dengan,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Anda harus meluncurkan video setelah halaman ditampilkan.


0

Coba tukar autoPlaydengan autoplay.

Tampaknya terkadang peka huruf besar / kecil. Sangat aneh karena berhasil autoplaybagi saya, tetapi hanya jika saya termasukcontrols

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.