การเล่นวิดีโออัตโนมัติไม่ทำงานในเบราว์เซอร์เดสก์ท็อป Safari และ Chrome

ฉันใช้เวลาค่อนข้างมากในการพยายามหาสาเหตุว่าทำไมวิดีโอถึงฝังตัวอยู่ที่นี่:

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

เริ่มเล่นโดยอัตโนมัติเมื่อโหลดเพจใน FireFox แต่ไม่สามารถเล่นอัตโนมัติในเบราว์เซอร์ที่ใช้ Webkit สิ่งนี้เกิดขึ้นในบางเพจแบบสุ่มเท่านั้น จนถึงตอนนี้ฉันไม่สามารถหาสาเหตุได้ ฉันสงสัยว่ามีแท็กที่ไม่ได้ปิดหรือ JS ขนาดใหญ่ที่สร้างโดย CMS editors

การแก้ไขที่ดีที่สุดที่ฉันจะได้รับคือการเพิ่มรหัสนี้หลังจากไฟล์ </video>

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

... ไม่สวย แต่ได้ผล

อัปเดต เมื่อเร็ว ๆ นี้เบราว์เซอร์จำนวนมากสามารถเล่นวิดีโอโดยอัตโนมัติโดยปิดเสียงดังนั้นคุณจะต้องเพิ่มmutedแอตทริบิวต์ให้กับแท็กวิดีโอด้วย

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

หลังจากใช้ jQuery play()หรือ DOM maniupulation ตามที่คำตอบอื่นแนะนำแล้วมันยังไม่ทำงาน (วิดีโอไม่ได้เล่นอัตโนมัติ) ใน Chrome สำหรับ Android (เวอร์ชัน 56.0)

ตามนี้โพสต์ในdevelopers.google.comจาก Chrome 53 ตัวเลือกเล่นอัตโนมัติเป็นที่ยอมรับโดยเบราว์เซอร์หากวิดีโอถูกปิด

ดังนั้นการใช้autoplay mutedแอตทริบิวต์ในแท็กวิดีโอจึงทำให้วิดีโอสามารถเล่นอัตโนมัติในเบราว์เซอร์ Chrome จากเวอร์ชัน 53 ได้

ข้อความที่ตัดตอนมาจากลิงค์ด้านบน:

การเล่นอัตโนมัติแบบปิดเสียงสำหรับวิดีโอได้รับการสนับสนุนโดย Chrome สำหรับ Android ในเวอร์ชัน 53 การเล่นจะเริ่มต้นโดยอัตโนมัติสำหรับองค์ประกอบวิดีโอเมื่อได้รับการดูหากทั้งสองอย่างautoplayและmutedตั้งค่าไว้ [... ]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Safari รองรับการเล่นอัตโนมัติแบบปิดเสียงบน iOS 10 และใหม่กว่า
• การเล่นอัตโนมัติไม่ว่าจะปิดเสียงหรือไม่ก็ตาม Firefox และ UC Browser รองรับ Android อยู่แล้วพวกเขาไม่ได้บล็อกการเล่นอัตโนมัติทุกประเภท

เกิดขึ้นที่ Safari และ Chrome บนเดสก์ท็อปไม่ชอบการจัดการ DOM รอบ ๆ แท็กวิดีโอ ซึ่งจะไม่เริ่มการทำงานของลำดับการเล่นเมื่อมีการตั้งค่าแอตทริบิวต์การเล่นอัตโนมัติแม้ว่าเหตุการณ์การเล่นผ่านจะเริ่มทำงานเมื่อ DOM รอบแท็กวิดีโอมีการเปลี่ยนแปลงหลังจากการโหลดหน้าเว็บครั้งแรก โดยทั่วไปฉันมีปัญหาเดียวกันจนกว่าฉันจะลบ. wrap () jQuery รอบ ๆ แท็กวิดีโอและหลังจากนั้นก็เล่นอัตโนมัติตามที่คาดไว้

Google เพิ่งเปลี่ยนนโยบายสำหรับการเล่นวิดีโออัตโนมัติจึงต้องเป็นเช่นนั้น muted

คุณสามารถตรวจสอบได้ที่นี่

ดังนั้นเพียงแค่เพิ่มปิดเสียง

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

สำหรับฉันปัญหาคือmutedต้องเพิ่มแอตทริบิวต์ภายในvideoแท็ก เช่น:

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

Chrome ไม่อนุญาตให้เล่นวิดีโอโดยเปิดเสียงโดยอัตโนมัติดังนั้นอย่าลืมเพิ่มmutedแอตทริบิวต์ให้กับvideoแท็กเช่นนี้

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

ตอนนี้ฉันได้รับปัญหาเดียวกันกับวิดีโอของฉัน

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

หลังจากค้นหาฉันพบวิธีแก้ปัญหา:

หากฉันตั้งค่าแอตทริบิวต์ "โหลดล่วงหน้า" เป็น "จริง" วิดีโอจะเริ่มต้นตามปกติ

การเพิ่มรหัสด้านล่างที่ด้านล่างของหน้าได้ผลสำหรับฉัน ฉันไม่รู้ว่าทำไมมันถึงได้ผล :(

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

ลองสิ่งนี้:

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

เพียงวิธีนี้ช่วยฉัน<video autoplay muted ...>...</video>ไม่ได้ผล ...

ไม่มีคำตอบอื่นใดที่เหมาะกับฉัน วิธีแก้ปัญหาของฉันคือกระตุ้นให้เกิดการคลิกบนวิดีโอ แฮ็ค (เนื่องจากการหมดเวลาที่จำเป็น) แต่ก็ใช้งานได้ดี:

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

เมื่อเร็ว ๆ นี้เราได้แก้ไขปัญหาที่คล้ายกันกับวิดีโอแบบฝังและพบว่าแอตทริบิวต์การเล่นอัตโนมัติและปิดเสียงไม่เพียงพอสำหรับการนำไปใช้งานของเรา

เราได้เพิ่มแอตทริบิวต์ "playinline" ที่สามลงในโค้ดและได้แก้ไขปัญหาสำหรับผู้ใช้ iOS

การแก้ไขนี้เฉพาะสำหรับวิดีโอที่จะเล่นแบบอินไลน์ จากhttps://webkit.org/blog/6784/new-video-policies-for-ios/ :

ใน iPhone ตอนนี้องค์ประกอบต่างๆจะได้รับอนุญาตให้เล่นแบบอินไลน์และจะไม่เข้าสู่โหมดเต็มหน้าจอโดยอัตโนมัติเมื่อการเล่นเริ่มต้นขึ้น องค์ประกอบที่ไม่มีคุณสมบัติ playinline จะยังคงต้องใช้โหมดเต็มหน้าจอสำหรับการเล่นบน iPhone เมื่อออกจากโหมดเต็มหน้าจอด้วยท่าทางบีบนิ้วองค์ประกอบที่ไม่มีการเล่นอินไลน์จะยังคงเล่นแบบอินไลน์

Google ได้อัปเดตนโยบายการเล่นอัตโนมัติ การเล่นอัตโนมัติใช้ได้เฉพาะในโหมดปิดเสียง ตรวจสอบลิงก์https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

ลองสิ่งนี้:

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

นี่คือวิธีที่ฉันทำตามปกติ การวนรอบการควบคุมและการเล่นอัตโนมัติไม่จำเป็นต้องมีค่าที่เป็นคุณลักษณะบูลีน

เนื่องจากตอนนี้ Chrome ป้องกันการเล่นอัตโนมัติในวิดีโอ html5 ดังนั้นโดยค่าเริ่มต้นจะไม่อนุญาตให้เล่นอัตโนมัติ เราจึงสามารถเปลี่ยนการตั้งค่านี้ได้โดยใช้การตั้งค่าสถานะโครเมียม เป็นไปไม่ได้สำหรับกรณีปกติดังนั้นฉันจึงหาวิธีแก้ไขอื่น ทำงานได้สมบูรณ์แบบ ... (เพิ่มพรีโหลด = "อัตโนมัติ")

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

ใช้เวลาสองชั่วโมงในการลองใช้วิธีแก้ปัญหาทั้งหมดที่กล่าวมาข้างต้น

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉันในที่สุด:

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

ใน Safari Iphone เมื่อเนยอยู่ในระดับต่ำและ iPhone อยู่ในโหมดพลังงานต่ำระบบจะไม่เล่นอัตโนมัติแม้ว่าคุณจะมีคุณสมบัติดังต่อไปนี้: เล่นอัตโนมัติ, วนซ้ำ, ปิดเสียง, เล่นอินไลน์บนแท็ก html ของวิดีโอ

เดินไปรอบ ๆ ฉันพบว่าการทำงานคือการมีเหตุการณ์ท่าทางของผู้ใช้เพื่อกระตุ้นการเล่นวิดีโอ:

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับท่าทางของผู้ใช้และนโยบายวิดีโอสำหรับ iOS ได้ในเว็บไซต์:

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

ฉันมีกรณีที่มันเกี่ยวข้องกับลำดับของประเภทไฟล์ที่แตกต่างกัน ลองเปลี่ยนดูว่าช่วยได้ไหม

ฉันเริ่มเล่นวิดีโอที่มองเห็นได้ทั้งหมด แต่โทรศัพท์รุ่นเก่าทำงานได้ไม่ดี ตอนนี้ฉันเล่นวิดีโอหนึ่งที่ใกล้ตรงกลางหน้าต่างมากที่สุดและหยุดส่วนที่เหลือชั่วคราว วานิลลา JS. คุณสามารถเลือกอัลกอริทึมที่คุณต้องการได้

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

ฉันแก้ปัญหาเดียวกันกับ

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

คุณต้องเปิดวิดีโอหลังจากที่แสดงเพจแล้ว

ลองเปลี่ยน autoPlayเป็นautoplay.

ดูเหมือนว่าจะพิจารณาตัวพิมพ์เล็กและใหญ่ในบางครั้ง แปลกมากเพราะมันใช้งานได้autoplayสำหรับฉัน แต่ถ้าฉันรวมไว้ด้วยcontrols