Pemutaran otomatis video tidak berfungsi di browser desktop Safari dan Chrome

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.

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>

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.

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.

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>

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

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>

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

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

Coba ini:

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

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

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

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

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.

Google memperbarui Kebijakan Putar Otomatis. Putar otomatis hanya berfungsi pada mode bisu. Periksa tautan https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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.

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

Menghabiskan dua jam mencoba semua solusi yang disebutkan di atas.

Inilah yang akhirnya berhasil untuk saya:

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

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/

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

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

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.

Coba tukar autoPlaydengan autoplay.

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