[HTML/HTML5] Phần 43: Nhúng video trong HTML5

Trước đây, để nhúng một video, thông thường các nhà phát triển web đều sử dụng một plug-in (chẳng hạn như Flash). Tuy nhiên, từ khi có HTML5, bạn đã có thể dùng phần tử video để mô tả cách nhúng một video bất kỳ vào trang web.

Trình duyệt hỗ trợ

Đa số các trình duyệt hiện nay đều hỗ trợ phần tử video như Chrome (4.0), Edge (9.0), Firefox (3.5), Safari (4.0), và Opera (10.5).

Phần tử video

Để hiển thị một video trong HTML, bạn hãy dùng đoạn mã nguồn như sau.

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

Trong ví dụ trên, bạn định nghĩa một video chứa bộ điều khiển (controls) như các nút play, pause và volume. Video trong ví dụ có chiều rộng là 320px và chiều cao là 240px, bạn có thể điều chỉnh kích thước video nếu muốn. Nếu bạn không thiết lập chiều rộng và chiều cao, trang web có thể bị nhấp nháy khi video đang tải.

Phần tử source mô tả video thay thế mà trình duyệt có thể sử dụng để phát video. Trình duyệt ưu tiên sử dụng nguồn đầu tiên, nếu nguồn này bị hư thì trình duyệt sẽ lấy nguồn dự phòng. Trong ví dụ trên, dammio.mp4 sẽ được phát trước, nếu tập tin này hỏng thì sẽ lấy dammio.ogg để phát.

Trong ví dụ, bạn cũng thấy có một đoạn văn bản “Trình duyệt của bạn không hỗ trợ thẻ video.”, tức là nếu trình duyệt của bạn không hỗ trợ phần tử video thì dòng thông báo này sẽ xuất hiện báo cho bạn biết.

Autoplay trong video

Nếu bạn muốn video tự động phát, bạn có thể thêm thuộc tính autoplay như sau:

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

Lưu ý, thuộc tính autoplay sẽ không hoạt động ở các thiết bị di động như iPad hay iPhone.

Định dạng video được trình duyệt hỗ trợ

Trong HTML5, chỉ có dạng định dạng video được các trình duyệt hỗ trợ đó là: MP4, WebM, và Ogg. Tuy nhiên, các trình duyệt lại không hỗ trợ hoàn toàn giống nhau mà khác nhau theo bảng sau.

Trình duyệt	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (từ Opera 25)	YES	YES

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

HTML5 định nghĩa các phương thức DOM, các thuộc tính và các sự kiện cho các phần tử video. Điều này cho phép bạn tải, chơi và dừng video cũng như thiết lập thời gian và volume. Cũng có một số sự kiện DOM thông báo bạn biết khi nào video bắt đầu hát hay bị dừng phát,…

Ví dụ sau sử dụng JavaScript làm các sự kiện điều khiển cho một video.

<!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="dammio.mp4" type="video/mp4">
    <source src="dammio.ogg" type="video/ogg">
    Trình duyệt của bạn không hỗ trợ
  </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>Ví dụ dùng JavaScript để điều khiển một video. --- dammio.com</p>
</body> 
</html>

Kết luận

Như vậy, trong bài bạn đã tìm hiểu được cách nhúng video vào trang web HTML5, mời bạn tiếp tục theo dõi bài tiếp theo để biết cách nhúng tập tin âm thanh và thậm chí là YouTube.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [HTML/HTML5] Phần 43: Nhúng video trong HTML5. https://www.dammio.com/2018/06/29/html-html5-phan-43-nhung-video-trong-html5.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 43: Nhúng video trong HTML5}, year = {2018}, url = {https://www.dammio.com/2018/06/29/html-html5-phan-43-nhung-video-trong-html5}, urldate = {2024-04-19} }

Kết nối