Tự học HTML - Bài 29 - Xử lý VIDEO

Thẻ HTML <video>

Để hiển thị 01 video trong HTML, ta dùng thẻ <video>

Ví dụ:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

Cách hoạt động

Thuộc tính controls thêm các điều khiển video như nút play, volume,…

Thuộc tính width và height nếu không thiết lập trình duyệt sẽ nhấp nháy khi tải video.

Thuộc tính <source> xác định đường dẫn đến tập tin. Trình duyệt sẽ nhận diện định dạng trước.

Dòng chữ nằm giữa thẻ <video> và </video> sẽ chỉ hiển thị trên trình duyệt nếu thẻ <video> không được hỗ trợ.

Thuộc tính autoplay

Để thiết lập tự động phát video, ta dùng thuộc tính autoplay.

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Ghi chú: 01 số trình duyệt sẽ không hỗ trợ tính năng này. Nhưng phát video không tiếng thì có.

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

Các định dạng tập tin thông dụng

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

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

Thẻ <video> dùng mô hình DOM để xác định phương thức, thuộc tính và sự kiện.

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

Ví dụ:

<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="movie.mp4" type="video/mp4">

    <source src="mov_bbb.ogg" type="video/ogg">

    Your browser does not support HTML 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>

Các thẻ trong <video>

Thẻ	Mô tả
<video>	Chèn 01 video hoặc phim
<source>	Chèn nhiều media như <video> và <audio>
<track>	Chèn phụ đề trong chương trình phát

 

Phụ đề phim có định dạng WebVTT (.vtt)

Ví dụ:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

 

Các thuộc tính tùy chọn của thẻ phụ đề <track>

Thuộc tính	Giá trị	Mô tả
default	default	Bật tính năng track nếu phần tham khảo của người dùng không chỉ rõ track nào được ưu tiên.
kind	captions chapters descriptions metadata subtitles	Xác định loại tập tin văn bản track.
label	text	Tiêu đề của text track.
src	URL	Bắt buộc phải có. Xác định đường dẫn URL của tập tin track.
srclang	language_code	Specifies the language of the track text data (required if kind="subtitles")

 

Thẻ <track> hỗ trợ các thuộc tính nhóm Global và nhóm Event của HTML.

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

 

Xem MỤC LỤC BÀI VIẾT VỀ HTML

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Sưu tầm bởi #drM