HTML5 Video

Phát video trong HTML

Trước HTML5, một video chỉ có thể được phát trong trình duyệt với một trình hỗ trợ mở rộng (như Flash Player).

Phần tử HTML5 <video> chỉ ra cách thức tiêu chuẩn để nhúng video vào trang web.

 

Phần tử HTML <video>

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

Ví dụ

<video width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

 

Cách thức hoạt động

Thuộc tính controls thêm trình điều khiển video như play, pause, và volume.

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.

Phần tử <source> cho phép bạn chỉ ra đường dẫn của video để trình duyệt lựa chọn. Trình duyệt sẽ lấy định dạng đầu tiên nó nhận ra.

Văn bản đặt giữa cặp thẻ <video> và </video> chỉ hiển thị nếu trình duyệt không hỗ trợ phần tử video.

 

HTML <video> autoplay

Để phát tự động một video ta dùng thuộc tính autoplay.

Ví dụ

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>

Thuộc tính autoplay không hoạt động trên thiết bị di động như iPad và iPhone.

 

HTML video – Trình duyệt hỗ trợ

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

Firefox

YES

YES

YES

Safari

YES

NO

NO

Opera

YES (from Opera 25)

YES

YES

 

Phân loại video

Định dạng File

Kiểu

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

 

HTML video – Phương thức, thuộc tính và sự kiện.

HTML5 xác định DOM phương thức, thuộc tính, và sự kiện cho phần tử <video>.

Đ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

<!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="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://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="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>



</body>

</html>

Để 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

Thẻ

Mô tả

<video>

Xác định một video hoặc phim

<source>

Xác định tài nguyên cho các phần tử media như <video> và <audio> (dùng thuộc tính src để dẫn nguồn cho video và audio)

<track>

Xác định phụ đề trong trình phát media

 

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Lên trên