Phát video tự động không hoạt động trong trình duyệt máy tính để bàn Safari và Chrome

Tôi đã dành khá nhiều thời gian để cố gắng tìm hiểu tại sao video được nhúng như ở đây:

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

bắt đầu phát tự động khi trang được tải trong FireFox nhưng không thể tự động phát trong các trình duyệt dựa trên Webkit. Điều này chỉ xảy ra trên một số trang ngẫu nhiên. Cho đến nay tôi đã không thể tìm ra nguyên nhân. Tôi nghi ngờ một số thẻ không được tiết lộ hoặc JS mở rộng được tạo bởi các biên tập viên CMS.

Cách khắc phục tốt nhất tôi có thể nhận được là thêm mã này ngay sau </video>

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

... không đẹp nhưng bằng cách nào đó hoạt động.

CẬP NHẬT Gần đây, nhiều trình duyệt chỉ có thể tự động phát video bị tắt âm thanh, vì vậy bạn cũng cần thêm mutedthuộc tính vào thẻ video

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

Sau khi sử dụng trình điều khiển jQuery play()hoặc DOM như được đề xuất bởi các câu trả lời khác, nó vẫn không hoạt động (Video không tự động phát) trong Chrome dành cho Android (Phiên bản 56.0).

Theo bài đăng này trong developers.google.com , Từ Chrome 53, tùy chọn tự động phát được trình duyệt tôn trọng, nếu video bị tắt tiếng .

Vì vậy, việc sử dụng autoplay mutedcác thuộc tính trong thẻ video cho phép video được tự động phát trong trình duyệt Chrome từ phiên bản 53.

Trích từ liên kết trên:

Tự động tắt âm thanh cho video được Chrome dành cho Android hỗ trợ kể từ phiên bản 53. Phát lại sẽ tự động bắt đầu cho một thành phần video khi nó xuất hiện nếu cả hai autoplayvà mutedđược đặt [...]

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

• Tự động tắt được hỗ trợ bởi Safari trên iOS 10 trở lên.
• Tự động phát, dù tắt tiếng hay không, đã được Firefox và UC Browser hỗ trợ trên Android: chúng không chặn bất kỳ loại tự động phát nào.

Điều xảy ra là Safari và Chrome trên Desktop không thích thao tác DOM xung quanh thẻ video. Họ sẽ không kích hoạt thứ tự phát khi thuộc tính tự động phát được đặt ngay cả khi sự kiện có thể phát đã xảy ra khi DOM xung quanh thẻ video đã thay đổi sau khi tải trang ban đầu. Về cơ bản, tôi đã gặp vấn đề tương tự cho đến khi tôi xóa một jQuery .wrap () xung quanh thẻ video và sau đó nó tự động phát như mong đợi.

Google chỉ thay đổi chính sách của họ cho video tự động phát, nó phải là muted

Bạn có thể kiểm tra ở đây

vì vậy chỉ cần tắt tiếng

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

Đối với tôi vấn đề là mutedthuộc tính cần phải được thêm vào trong videothẻ. I E:

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

Chrome không cho phép tự động phát video có âm thanh, vì vậy hãy đảm bảo thêm mutedthuộc tính vào videothẻ như thế này

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

Bây giờ tôi chỉ gặp vấn đề tương tự với video của mình

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

Sau khi tìm kiếm, tôi đã tìm thấy một giải pháp:

Nếu tôi đặt thuộc tính "tải trước" thành "true", video sẽ bắt đầu bình thường

Thêm mã dưới đây ở dưới cùng của trang làm việc cho tôi. Tôi không biết tại sao nó hoạt động :(

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

Thử cái này:

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

Chỉ có giải pháp này giúp tôi, <video autoplay muted ...>...</video>không làm việc ...

Không có câu trả lời nào khác làm việc cho tôi. Cách giải quyết của tôi là kích hoạt một nhấp chuột vào video; hacky (vì thời gian chờ là cần thiết) nhưng nó hoạt động tốt:

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

Gần đây chúng tôi đã giải quyết một vấn đề tương tự với một video nhúng và thấy rằng các thuộc tính tự động phát và tắt tiếng là không đủ để thực hiện.

Chúng tôi đã thêm thuộc tính "Playsinline" thứ ba vào mã và nó đã khắc phục sự cố cho người dùng iOS.

Khắc phục sự cố này dành riêng cho các video sẽ được phát nội tuyến. Từ https://webkit.org/blog/6784/new-video-polaho-for-ios/ :

Trên iPhone, các thành phần giờ đây sẽ được phép phát nội tuyến và sẽ không tự động vào chế độ toàn màn hình khi bắt đầu phát lại. các yếu tố không có thuộc tính Playsinline sẽ tiếp tục yêu cầu chế độ toàn màn hình để phát lại trên iPhone. Khi thoát khỏi toàn màn hình bằng cử chỉ chụm, các phần tử không có playinline sẽ tiếp tục phát nội tuyến.

Google cập nhật Chính sách tự động phát. Tự động phát chỉ hoạt động ở chế độ tắt tiếng. Kiểm tra liên kết https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Thử cái này:

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

Đây là cách tôi thường làm nó. vòng lặp, điều khiển và tự động phát không yêu cầu giá trị chúng là thuộc tính boolean.

Điều này là do hiện tại chrome đang ngăn tự động phát trong video html5, vì vậy theo mặc định, chúng sẽ không cho phép tự động phát. vì vậy chúng tôi có thể thay đổi cài đặt này bằng cài đặt cờ chrome. Điều này là không thể đối với trường hợp bình thường vì vậy tôi đã tìm một giải pháp khác. điều này đang hoạt động hoàn hảo ... (thêm 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();  

Đã dành hai giờ để thử tất cả các giải pháp được đề cập ở trên.

Đây là những gì cuối cùng đã làm việc cho tôi:

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

Trên safari Iphone khi bơ thấp và iphone ở Chế độ năng lượng thấp, nó sẽ không tự động phát, ngay cả khi bạn có các thuộc tính sau: tự động phát, lặp, tắt tiếng, playinline được đặt trên thẻ html video của bạn.

Đi bộ xung quanh tôi thấy làm việc là có sự kiện cử chỉ người dùng để kích hoạt phát video:

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

bạn có thể đọc thêm về cử chỉ của người dùng và Chính sách video cho iOS trong trang web của webkit:

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

Tôi đã có một trường hợp nó có liên quan đến thứ tự của các kiểu tệp khác nhau. Hãy thử thay đổi nó và xem nếu điều đó giúp.

Tôi bắt đầu với việc phát tất cả các video có thể nhìn thấy, nhưng điện thoại cũ không hoạt động tốt. Vì vậy, ngay bây giờ tôi phát một video gần trung tâm cửa sổ nhất và tạm dừng phần còn lại. Vanilla JS. Bạn có thể chọn thuật toán bạn thích.

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

Tôi đã giải quyết vấn đề tương tự với,

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

Bạn phải khởi chạy các video sau khi trang đã được hiển thị.

Hãy thử trao đổi trong autoPlaycho autoplay.

Nó dường như là trường hợp nhạy cảm đôi khi. Rất kỳ quái bởi vì nó làm việc autoplaycho tôi, nhưng chỉ khi tôi bao gồmcontrols