SỮA LỖI TỰ ĐỘNG PHÁT VIDEO HTML KHÔNG HOẠT ĐỘNG

Để tối ưu hóa các trang trên blog này, gần đây tôi đã thay thế ảnh động GIF bằng video tự động phát. Nó yêu cầu một vài người cố gắng làm cho đúng, vì vậy đây là cách nó hoạt động.

 
Video dưới đây sẽ không tự động phát.

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

Để khắc phục điều này, chúng tôi thêm muted thuộc tính, điều này sẽ tắt âm thanh, làm cho video ít bị xâm phạm hơn.

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

Tuy nhiên, video trên vẫn không tự động phát trên iOS Safari, Safari yêu cầu chúng tôi thêm thuộc playsinline tính.

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

Chúng tôi có thể cố gắng vượt qua các giới hạn tự động phát này bằng một số JavaScript, nhưng điều đó sẽ chỉ hoạt động nếu JavaScript được chạy do hành động của người dùng.

Mã bên dưới sẽ không hoạt động, nó sẽ đưa ra cảnh báo trong bảng điều khiển dành cho nhà phát triển.

document.querySelector('video').play();

Hành động phát bên dưới sẽ hoạt động vì mã chạy do hành động của người dùng.

<button>Play</button>

<script>
    document.querySelector('button').addEventListener('click', () => {
        document.querySelector('video').play();
    });
</script>

Nhấn play để phát video đầu tiên trên trang
Chúc mọi người thành công với thủ thuật này.