Hướng dẫn add video html - thêm html video

- Thuộc tính height dùng để thiết lập chiều cao của trình phát video.

- Để sử dụng thuộc tính height thì ta thêm nó vào thẻ với cú pháp như sau:

- Chiều cao của trình phát video được xác định dựa trên một giá trị pixel cụ thể.

- Ví dụ, nếu tôi viết height="300" thì trình phát video sẽ có chiều cao là 300 pixel [Xem ví dụ]

- Chiều cao của trình phát video được xác định dựa trên tỷ lệ phần trăm "chiều cao phần nội dung" của phần tử cha của nó.hdun2.mp4, nếu tập tin hdun2.mp4 không tồn tại thì trình xem phim sẽ sử dụng tập tin cjbsj.mp4, nếu tập tin cjbsj.mp4 không tồn tại thì trình xem phim sẽ chuyển sang sử dụng tập tin bunny.mp4, . . . .

Xem ví dụ

2] Các thuộc tính được sử dụng bên trong thẻ

- Dưới đây là danh sách những thuộc tính thường được sử dụng bên trong thẻ

[các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính] để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính]

3] Cách tạo một bản phụ đề cho đoạn video

3.1] Tạo một tập tin phụ đề

- Cách tạo một tập tin phụ đề cũng tương tự như cách tạo một tập tin HTML, chỉ khác ở chỗ là phần đuôi thì đổi lại thành .vtt.vtt

3.2] Viết nội dung cho tập tin phụ đề

- Nội dung của một tập tin phụ đề [có đuôi .vtt] phải được tắt đầu bằng cụm từ WEBVTTWEBVTT

- Việc xác định phụ đề & thời điểm hiển thị khá đơn giản, các bạn xem ví dụ bên dưới là hiểu ngay.

WEBVTT

00:00:00.500 --> 00:00:02.000
HẢ !?

00:00:02.000 --> 00:00:05.500
CON BƯƠM BƯỚM KÌA !

00:00:06.000 --> 00:00:08.000
NÓ THẬT ĐẸP =]]

00:00:09.000 --> 00:00:10.000
ÔI VÃI @_@

- Chúng ta có thể kết hợp với một vài thẻ định dạng văn bản để trang trí cho phụ đề nổi bật hơn.

WEBVTT

00:00:00.500 --> 00:00:02.000
HẢ !?

00:00:02.000 --> 00:00:05.500
CON BƯƠM BƯỚM KÌA !

00:00:06.000 --> 00:00:08.000
NÓ THẬT ĐẸP =]]

00:00:09.000 --> 00:00:10.000
ÔI VÃI @_@

3.3] Chèn tập tin phụ đề vào đoạn video

- Để chèn một tập tin phụ đề vào đoạn video thì chúng ta đặt thẻ nằm ngay bên dưới thẻ của đoạn video với cú pháp như sau:

Xem ví dụ

4] Tạo nhiều phiên bản phụ đề cho đoạn video

- Để tạo nhiều phiên bản phụ đề cho đoạn video thì trước tiên chúng ta cần phải tạo nhiều tập tin phụ đề, sau đó sử dụng các thẻ để nhúng từng tập tin phụ đề tương ứng vào đoạn video.

- Để tạo hai phiên bản phụ đề TIẾNG VIỆT & TIẾNG ANH cho đoạn video giống như cái ví dụ nằm ở đầu bài hướng dẫn thì chúng ta thực hiện các bước như sau:

- Bước 1: Tạo hai tập tin phụ đề phude_vi.vtt [bản TIẾNG VIỆT] và phude_en.vtt [bản TIẾNG ANH]phude_vi.vtt [bản TIẾNG VIỆT] và phude_en.vtt [bản TIẾNG ANH]

WEBVTT

00:00:00.500 --> 00:00:02.000
HẢ !?

00:00:02.000 --> 00:00:05.500
CON BƯƠM BƯỚM KÌA !

00:00:06.000 --> 00:00:08.000
NÓ THẬT ĐẸP =]]

00:00:09.000 --> 00:00:10.000
ÔI VÃI @_@

WEBVTT

00:00:00.500 --> 00:00:02.000
WHAT !?

00:00:02.000 --> 00:00:05.500
BUFFTERFLY !

00:00:06.000 --> 00:00:08.000
IT IS BEAUTIFUL =]]

00:00:09.000 --> 00:00:10.000
F*CK @_@

- Bước 2: Sử dụng hai thẻ để chèn hai bản phụ đề TIẾNG VIỆT - TIẾNG ANH vào đoạn video.

- Lưu ý: Thuộc tính default dùng để chỉ định phiên bản phụ đề được áp dụng mặc định cho đoạn video.

- Thuộc tính controls dùng để chỉ định việc hiển thị trình điều khiển đoạn video.controls dùng để chỉ định việc hiển thị trình điều khiển đoạn video.

- Thuộc tính autoplay dùng để chỉ định việc đoạn video sẽ tự động được phát ngay sau khi trang tải xong.autoplay dùng để chỉ định việc đoạn video sẽ tự động được phát ngay sau khi trang tải xong.

- Thuộc tính loop dùng để thiết lập việc đoạn video sẽ tự động được phát lại sau mỗi lần kết thúc.loop dùng để thiết lập việc đoạn video sẽ tự động được phát lại sau mỗi lần kết thúc.

- VẤN ĐỀ: Khi ta chèn một đoạn video vào trang web thì mặc định đoạn video sẽ tự động được tải xuống trong quá trình tải trang, điều đó thật sự lãng phí [gây tốn băng thông, giảm tốc độ tải trang] nếu người dùng không có nhu cầu xem đoạn video.

- Từ đây, thuộc tính preload được sử dụng để tùy chỉnh việc đoạn video có được tải xuống trong quá trình tải trang hay không.preload được sử dụng để tùy chỉnh việc đoạn video có được tải xuống trong quá trình tải trang hay không.

- Cú pháp:

- Trong đó, value có thể được xác định dựa theo một trong hai giá trị:

- Thuộc tính muted chỉ định chế độ mặc định tắt âm thanh đoạn video.muted chỉ định chế độ mặc định tắt âm thanh đoạn video.

- Thuộc tính poster dùng để chỉ định một tấm hình dùng làm ảnh bìa cho đoạn video trước khi nó được phát.poster dùng để chỉ định một tấm hình dùng làm ảnh bìa cho đoạn video trước khi nó được phát.

- Thuộc tính width dùng để thiết lập chiều rộng của trình phát video.width dùng để thiết lập chiều rộng của trình phát video.

- Để sử dụng thuộc tính width thì ta thêm nó vào thẻ với cú pháp như sau:

- Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:

- Lưu ý: Nếu chúng ta chỉ sử dụng thuộc tính width để thiết lập chiều rộng cho trình phát video mà không sử dụng thuộc tính height để thiết lập chiều cao cho trình phát video thì mặc định chiều cao của trình phát video sẽ tự động tăng hoặc giảm sao cho tỷ lệ chiều rộng/chiều cao của trình phát video bằng với tỷ lệ chiều rộng/chiều cao của đoạn video.

- Thuộc tính height dùng để thiết lập chiều cao của trình phát video.height dùng để thiết lập chiều cao của trình phát video.

- Để sử dụng thuộc tính height thì ta thêm nó vào thẻ với cú pháp như sau:

- Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:

- Lưu ý: Nếu chúng ta chỉ sử dụng thuộc tính height để thiết lập chiều cao cho trình phát video mà không sử dụng thuộc tính width để thiết lập chiều rộng cho trình phát video thì mặc định chiều rộng của trình phát video sẽ tự động tăng hoặc giảm sao cho tỷ lệ chiều rộng/chiều cao của trình phát video bằng với tỷ lệ chiều rộng/chiều cao của đoạn video.