Để 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 bên dưới sẽ không tự động phát
Để khắc phục điều này, chúng tôi thêm thuộc tính
0, điều này sẽ tắt âm thanh, làm cho video ít bị xâm phạm hơn
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 tính
1
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
Kiếm thu nhập với kỹ năng HTML của bạn
Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.
Bài viết này thảo luận về tính năng tự động phát video trong HTML, bao gồm cách triển khai tính năng này, cách sử dụng tính năng này và cách xử lý sự cố trong các trình duyệt khác nhau. Để hiểu rõ hơn, chúng ta sẽ xem xét các giải thích mã chi tiết cũng như kết quả mong muốn
điều kiện tiên quyết
quan trọng để có. Thẻ HTML Thật tuyệt khi có. Thẻ video và thẻ âm thanh trong HTML
Thuộc tính tự động phát
Tính năng tự động phát video trong HTML được sử dụng để tự động phát tệp âm thanh/video. Thuộc tính tự động phát được cung cấp cho các thành phần phương tiện HTML như thẻ âm thanh và video
Tự động phát là một thuộc tính boolean. Khi được bật, âm thanh/video sẽ bắt đầu phát ngay khi trang web được tải và sẽ tiếp tục phát
cú pháp
Tự động phát video hoạt động như thế nào?
Hãy tưởng tượng bạn đang lướt internet, truy cập một trang web và nghe thấy tiếng ồn hoặc âm nhạc tự phát. Tất nhiên, điều này sẽ gây rắc rối về mặt trải nghiệm người dùng. Đó là lý do tại sao, trong hầu hết các trình duyệt hiện tại, tính năng tự động phát video được bật khi
- Âm lượng của nguồn âm thanh được đặt thành 0 hoặc tắt tiếng
- Video được đặt ở chế độ tắt tiếng
- Người dùng đã tương tác với trang web [bằng cách nhấp, nhấn, v.v.]
Người dùng có thể bật lại âm thanh bằng cách nhấp vào nút bật tiếng trong điều khiển, ngay cả khi video tự động phát ban đầu bị tắt tiếng
Hãy để chúng tôi xem mã để hiểu nó tốt hơn
html video autoplay
Sorry, your broswer doesn't support embedded videos. Here's the Link to the video
Giải thích mã
thẻ được sử dụng để chèn video vào trang web cùng với thuộc tính điều khiển để thêm điều khiển vào video, thuộc tính chiều rộng để mở rộng kích thước của video và tự động phát video trong HTML được sử dụng để tự động phát video ngay khi tải trang, ban đầu được đặt thành tắt tiếng
thẻ cùng với thuộc tính src chỉ định nguồn hoặc đường dẫn tệp của video sẽ được hiển thịThuộc tính loại chỉ định loại video là mp4, ogg hoặc webm
Nếu video không xem được, một thông báo hoặc văn bản sẽ được thêm vào để hiển thị trên trang web
Ghi chú. Để tắt tự động phát, autoplay=”false” sẽ không hoạt động; . Để dừng video tự động phát, thuộc tính phải được xóa hoàn toàn
Tự động phát vòng lặp
Khi thuộc tính vòng lặp được sử dụng với tính năng tự động phát trong HTML, video sẽ tiếp tục phát vô thời hạn trừ khi video bị tạm dừng theo cách thủ công bằng các điều khiển
Tự động phát lặp lại không có điều khiển
Nếu một video sẽ được sử dụng làm hoạt ảnh im lặng trên một trang web, chúng tôi có thể loại bỏ các điều khiển và đặt video thành chỉ tự động phát và lặp lại
Làm cách nào để khắc phục Tự động phát không hoạt động?
Như đã thảo luận ở trên, nhiều trình duyệt phổ biến cho phép tự động phát video trong HTML chỉ hoạt động khi âm thanh bị tắt hoặc tắt để cải thiện trải nghiệm người dùng. Điều này làm cho video ít bị xâm phạm hơn và ngăn tiêu thụ dữ liệu cho đến khi người dùng tự nguyện bắt đầu tải xuống
Do thuộc tính autoplay nhận một giá trị boolean nên các nhà phát triển thường cố gắng sử dụng nó dưới dạng autoplay="true", tuy nhiên, điều này chỉ hoạt động nếu video bị tắt tiếng hoặc không có âm thanh
Tuy nhiên, video trong các ví dụ 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 một thuộc tính có tên là playinline
Ghi chú. Bất cứ khi nào có thể, bạn nên sử dụng thuộc tính tự động phát thay vì tập lệnh, vì tập lệnh có thể dẫn đến nội dung dự phòng
Cách tự động phát video bằng HTML5 trong Chrome?
Mặc dù Chrome là một trình duyệt tuyệt vời nhưng đôi khi các biện pháp bảo mật mở rộng của nó lại xung đột với mã và dẫn đến kết quả không mong muốn. Chẳng hạn, các nhà phát triển chrome đã triển khai chức năng ngăn video phát trên các trang web nếu âm thanh được bật. Nó sẽ chặn nó vì nó không muốn người dùng nghe thấy một video không mong muốn hoặc khó chịu
Sử dụng thẻ video HTML5, việc thêm video có điều khiển ở chế độ tự động phát lặp có thể giống như thế này-
Chrome sẽ không phát video vì video không bị tắt tiếng vì Chrome không muốn âm thanh bắt đầu phát tự động khi người dùng tải trang web
Vì vậy, câu trả lời khá đơn giản. video phải được tắt tiếng để Chrome có thể phát video đúng cách khi tải trang web. Thêm thuộc tính tắt tiếng vào video như sau để tắt tiếng video
Tự động phát video Youtube
Youtube không cung cấp các tệp video thô; . Không thể sử dụng thẻ video vì id đó không khớp với tệp thực tế
Để nhúng video YouTube vào trang web, hãy sử dụng phần tử. Để tạo video YouTube tự động phát, hãy thêm mute=1 sau autoplay=1 vào URL nguồn của video
Youtube video autoplay
Tạo kiểu tự động phát video bằng CSS
Để tạo kiểu cho video tự động phát trong HTML, các thành phần CSS khác nhau có thể được sử dụng để mở rộng chiều rộng và chiều cao của video, cũng như để thêm màu phông nền và làm mờ nó