Bài 42: Hiển thị video YouTube trong HTML
Cách đơn giản và dễ dàng nhất để đưa một video vào trong HTML là sử dụng YouTube.
Những khó khăn gặp phải với định dạng Video?
Trong bài trước, bạn đã biết chúng ta có thể chuyển đổi từ một định dạng video có sẵn sang các định dạng video khác để chúng có thể chạy trên mọi trình duyệt khi đưa vào website.
Nhưng việc chuyển đổi định dạng video hoàn toàn không dễ dàng và sẽ tốn rất nhiều thời gian.
Giải pháp đơn giản nhất cho bạn đó là sử dụng Youtube. Bạn chỉ cần upload video lên, Youtube sẽ tự động chuyển đổi định dạng và hiển thị video tương thích trên các trình duyệt. Công việc của bạn chỉ đơn giản là chèn liên kết từ YouTube vào website.
ID ViDeo của YouTube
Khi bạn tải một video lên trên YouTube, bạn sẽ nhận được một ID là các ký tự bao gồm: chữ, s, dấu gạch dưới (giống như thếnày: XGSy3_Czz8k), khi bạn lưu (hoặc sử dụng ) một video.
Bạn có thể sử dụng id đó để đưa video của bạn mong muốn vào trong đoạn code HTML.
Đưa một Video từ YouTube vào trang HTML
Để đưa video mà bạn mong muốn vào một trang web, bạn cần làm những việc sau đây:
- Tải video lên YouTube
- Lấy ID của video sau khi tải
- Xác định phần tử <iframe> trên trang web của bạn
- Cho phép các thuộc tính “src” trỏ tới video URL
- Sử dụng thuộc tính width, height để quy định kích cỡ hiển thị
- Thêm một vài tham số vào địa chỉ video nếu cần thiết
Ví dụ – Sử dụng phần tử iFrame
<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</body>
</html>
YouTube Autoplay
Bạn có thể cho các video phát một cách tự động khi người sử dụng truy cập vào trang web của mình bằng cách thêm một số tham số đơn giản vào địa chỉ URL.
Chú ý: Bạn hãy xem xét cẩn thận khi quyết định để tự động phát video của bạn. Tự động bắt đầu từ một đoạn video có thể làm phiền người sử dụng của bạn và cuối cùng gây hại nhiều hơn lợi.
Value 0 (default): Video sẽ không tự động chạy khi trang được tải.
Value 1: Video sẽ tự động chạy khi trang được tải.
YouTube – Autoplay
<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
</body>
</html>
YouTube Playlist
Sử dụng tính năng này nếu bạn muốn tạo một danh sách video chạy nối tiếp nhau, các video ID phân cách nhau bằng dấu phẩy.
YouTube Loop ( Vòng lặp)
Value 0 (default): Video chỉ chạy một lần.
Value 1: Video được chạy đi chạy lại nhiều lần (mãi mãi).
YouTube – Loop
<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>
</body>
</html>
YouTube Controls( Thanh điều khiển)
Value 0: Không hiển thị thanh điều khiển.
Value 1 (default): Cho phép hiển thị thanh điều khiển .
YouTube – Controls
<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>
</body>
</html>
YouTube – Sử dụng thẻ <object> hoặc <embed>
Chú ý: Từ tháng 01 năm 2015, YouTube chính thức bỏ hình thức nhúng video bằng thẻ <Object> và <Embed>. Bạn nên sử dụng thẻ Iframe.
Ví dụ – Sử dụng thẻ <object> (deprecated)
<!DOCTYPE html>
<html>
<body><object width="420" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>
</body>
</html>
Ví dụ – Sử dụng thẻ <embed>
<!DOCTYPE html>
<html>
<body><embed width="420" height="315"
src="http://www.youtube.com/v/XGSy3_Czz8k">
</body>
</html>
