Làm cách nào để tự động phát video trong HTML có âm thanh?

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

Làm cách nào để tự động phát video có âm thanh trong HTML?

Chúng tôi có thể tự động phát video có âm thanh không?

Chúng tôi có thể phát cả âm thanh và video trong HTML không?

Làm cách nào để tự động phát âm thanh trong HTML mà không cần điều khiển?