Phần tử HTML <video> được sử dụng để hiển thị video trên trang web.
Phần tử HTML
Để hiển thị video trong HTML, hãy sử dụng phần tử <video>:
Thí dụ
& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
Your browser does not support the video tag.
Hãy tự mình thử »
Làm thế nào nó hoạt động
Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.
Đó là một ý tưởng tốt để luôn bao gồm các thuộc tính width và height. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.
Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.
Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>.
HTML Autoplay
Để tự động bắt đầu video, hãy sử dụng thuộc tính <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>2:
Thí dụ
& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
Your browser does not
support the video tag.
Hãy tự mình thử »
Làm thế nào nó hoạt động Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.
Thí dụ
& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
Your browser does not support the video tag.
Hãy tự mình thử »
Làm thế nào nó hoạt động
Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.
Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên. | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>.
HTML Autoplay
Hỗ trợ trình duyệt | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. |
Yếu tố | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. |
Yếu tố | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. |
Yếu tố | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Yếu tố |
Opera | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. | Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>. |
Yếu tố
Có ba định dạng video được hỗ trợ: MP4, WebM và OGG. Hỗ trợ trình duyệt cho các định dạng khác nhau là: | Trình duyệt |
Webm | OGG |
Bờ rìa | VÂNG |
Trình duyệt Chrome
Firefox
Cuộc đi săn
KHÔNG
Opera
Video HTML - Các loại phương tiện
Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên. | Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>. |
Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên. | Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>. |
Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên. | Văn bản giữa các thẻ <video> và <video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>0 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>. |
HTML5 xác định DOM phương thức, thuộc tính, và sự kiện cho phần tử .Nguyễn Văn Hợi vào 10/07/2019. Lượt xem: 1,970
HTML5 xác định DOM phương thức, thuộc tính, và sự kiện cho phần tử .
Điều này cho phép bạn tải, phát và dừng video cũng như cài đặt độ dài và âm lượng.
Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi video bắt đầu phát, bị tạm dừng, v.v.
Ví dụ sử dụng JavaScript
Để tham khảo thêm về DOM các bạn có thể vào đường dẫn HTML5 Audio/Video DOM Reference.
Các thẻ video HTML5
<video width="320" height="240" controls> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>Thẻ
Mô tả
Bạn cũng nên thêm thuộc tính width và height, nếu không đặt kích thước cho video, trang có thể bị nhấp nháy (do chưa xác định được kích thước video) khi tải trang.
Xác định một video hoặc phim
Xác định tài nguyên cho các phần tử media như và (dùng thuộc tính src để dẫn nguồn cho video và audio)
Xác định phụ đề trong trình phát media
Trích nguồn từ: (//www.w3schools.com/html/html5_video.asp)
Các thẻ video HTML5
<video width="320" height="240" autoplay> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support the video tag. </video>Thẻ
Mô tả
Trong HTML5, có 3 định dạng video được hỗ trợ : MP4, WebM, và Ogg.
Trình duyệt hỗ trợ cho các định dạng khác nhau là:
Browser | MP4 | WebM | Ogg |
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
NO | YES | YES | YES |
NO | YES | NO | NO |
Chrome | Firefox | YES | YES |
NO
Chrome | Firefox |
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
Internet Explorer
YES
NO
Chrome
Firefox
<!DOCTYPE html> <html> <body> <div style="text-align:center"> <button title="playPause()">Play/Pause</button> <button title="makeBig()">Big</button> <button title="makeSmall()">Small</button> <button title="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/mov_bbb.mp4" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> <p>Video courtesy of <a href="//www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p> </body> </html>Safari HTML5 Audio/Video DOM Reference.
Opera
YES (from Opera 25) | Phân loại video |
Định dạng File | Kiểu |
Định dạng File | Kiểu |
Định dạng File | Kiểu |
HTML video – Phương thức, thuộc tính và sự kiện.