Tự động phát video HTML5 trên iPhone

Tôi có một số loại vấn đề kỳ lạ. Tôi cố gắng tạo một trang web với video nền lặp lại. Mã trông giống như sau:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

Điều này hoạt động hoàn toàn tốt trên hầu hết các trình duyệt (IE gặp khó khăn với thứ phù hợp với đối tượng này nhưng tôi không bận tâm) nhưng trên iPhone, video sẽ không tự động phát nhưng trên iPad thì có. Tôi đã đọc Chính sách mới dành cho iOS và tôi nghĩ rằng tôi đáp ứng các yêu cầu (nếu không iPad sẽ không tự động phát). Tôi đã thực hiện một số thử nghiệm khác:

• Xóa các div chồng chéo sẽ không khắc phục được
• Xóa z-index sẽ không sửa được
• Wifi hoặc di động không tạo ra sự khác biệt
• Kích thước tệp video cũng không tạo ra sự khác biệt

Tôi làm sai hay iPhone không tự động phát video và luôn yêu cầu tương tác? Tôi chỉ quan tâm đến iOS 10, tôi biết rằng các yêu cầu trên iOS 9 khác nhau

Liệu playsinlinesự giúp đỡ thuộc tính?

Đây là những gì tôi có:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Xem bình luận tại playsinlineđây: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOs 10+ cho phép video tự động phát nội tuyến. nhưng bạn phải tắt "Chế độ nguồn điện thấp" trên iPhone của mình.

Dưới đây là thủ thuật nhỏ để vượt qua tất cả những khó khăn bạn gặp phải đối với tính năng tự động phát video trong một trang web:

1. Kiểm tra video đang phát hay không.
2. Kích hoạt phát video trên sự kiện như nhấp hoặc chạm vào cơ thể.

Lưu ý: Một số trình duyệt không cho phép video tự động phát trừ khi người dùng tương tác với thiết bị.

Vì vậy, các tập lệnh để kiểm tra xem video có đang phát hay không là:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Và sau đó, bạn có thể chỉ cần tự động phát video bằng cách gắn trình nghe sự kiện vào phần nội dung:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Lưu ý: autoplaythuộc tính rất cơ bản cần được thêm vào thẻ video ngoài các tập lệnh này.

Bạn có thể xem ví dụ làm việc với mã ở đây tại liên kết này:

Cách tự động phát video khi thiết bị ở chế độ nguồn điện thấp / chế độ tiết kiệm dữ liệu / sự cố trình duyệt safari