Bài 39: Video Trong HTML5 | Tìm ở đây

Trang chủ » Phần Tử Html Chính Xác để Phát Tệp Video Là Gì » Bài 39: Video Trong HTML5 | Tìm ở đây

Có thể bạn quan tâm

Trình duyệt của bạn không hỗ trợ thẻ video của HTML5.

Chạy video trong HTML

Trước HTML5, video chỉ có thể được chạy được trong các trình duyệt có cài đặt plug-in để xem video (ví dụ như flash).

Phần tử <video> trong HTML5 định nghĩa một chuẩn để nhúng video vào một trang web.

Trình duyệt hỗ trợ

Những con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>.

Trình dyệt icon_chrome icon_ie icon_firefox icon_safari icon_opera
<video> 4.0 9.0 3.5 4.0 10.5

Phần tử <video> trong HTML

Để hiển thị một video  HTML, sử dụng phần tử <video>:

Ví dụ:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video. </video>

Xem kết quả

Trình duyệt của bạn không hỗ trợ thẻ video.

Cách hoạt động?

Thuộc tính controls thêm các điều khiển  cho video như chạy, dừng và âm lượng.

Một ý tưởng tốt là luôn sử dụng thuộc tính chiều rộng (width) và chiều cao (height). Nếu chiều cao và chiều rộng không được thiết lập, trang web có thể rung hình trong khi tải video.

Phần tử <source> cho phép bạn định nghĩa các các tập tin video thay thế mà trình duyệt có thể chọn từ đó.  Trình duyệt sẽ sử dụng các định dạng đầu tiên mà nó nhận biết được.

Đoạn văn bản nằm giữa thẻ <video> và </video> sẽ chỉ hiển thị trong trình duyệt mà trình duyệt không hỗ trợ phần tử <video>.

Phát tự động video trong HTML

Để một video chạy tự động ta sử dụng thuộc tính autoplay:

Ví dụ:

<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video. </video>

Xem kết quả

Trình duyệt của bạn không hỗ trợ thẻ video. Thuộc tính autoplay không làm việc trong các thiết bị di động như iPad và iPhone.

HTML Video – Hỗ trợ trình duyệt

Trong HTML5, Có 3 loại video được hỗ trợ với định dạng: MP4, WebM, and Ogg.

Các trình duyệt hỗ trợ các định dạng khác nhau:

Trình duyệt MP4 WebM Ogg
Internet Explorer Có Không Không
Chrome Có Có Có
Firefox Có Có Có
Safari Có Không Không
Opera Có (từ Opera 25) Có Có

HTML Video – Các kiểu Media

Định dạng File Kiểu Media
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video – Các phương thức, thuộc tính và sự kiện

HTML5 định nghĩa DOM (Data Object Model) với các phương thức, thuộc tính và sự kiện cho phần phần tử  <video>.

Điều này cho phép bạn tải, chạy và dừng video, cũng như các thiết lập thời gian chạy và âm lượng.

Cũng có những sự kiện DOM có thể thông báo cho bạn khi video bắt đầu chạy, dừng, vv.

Ví dụ: Sử dụng JavaScript

<!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" 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> </body> </html>

Xem kết quả

Play/Pause Big Small Normal

Trình duyệt của bạn không hỗ trợ thẻ video của HTML5.

Thẻ Video trong HTML5

Thể Mô tả
<video> Định nghĩa một video hoặc đoạn phim
<source> Định nghĩa nhiều nguồn tài nguyên cho phần tử media, cũng như <video> và<audio>
<track> Định nghĩa phần text hiển thị khi chạy nhạc

Từ khóa » Phần Tử Html Chính Xác để Phát Tệp Video Là Gì