NTM Solutions

Thứ Tư, 8 tháng 6, 2022

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

Sưu tầm bởi #drM

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS