Cách dễ dàng nhất để phát video trong trang HTML là sử dụng Youtube.
Phát mệt với các định dạng video?
Trong phần trước của khóa học, bạn đã tìm hiểu về định dạng video. Và bạn có thể phải chuyển đổi định dạng video để khiến nó chạy đc trên mọi trình duyệt.
Chuyển định đạng video có thể sẽ rất vất vả và tốn thời gian.
Một giải pháp dễ dàng hơn là để Youtube phát video trên trang của bạn.
Youtube Video Id
Youtube sẽ hiển thị một id (như tgbNymZ7vqY), khi bạn lưu (hoặc phát) một video.
Bạn có thể dùng id này và tham chiếu đến video trong trang HTML.
Phát một video Youtube trong HTML.
Để phát video trên một trang web, bạn có thể làm theo các bước sau:
- Tải video lên Youtube
- Oánh dấu video id
- Thêm một phần tử <iframe> trong trang của bạn
- Trỏ thuộc tính src đến video URL
- Dùng thuộc tính width và height để xác định kích thước của trình phát
- Thêm các tham số vào URL (xem phần dưới)
Ví dụ sử dụng Iframe (nên dùng)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Tự động phát
Bạn có thể buộc video tự phát khi người dùng vào trang bằng các thêm tham số sau vào Youtube URL.
Note: Nên xem xét cẩn thận khi quyết định cho video tự phát, vì nó có thể làm phiền người dùng và lợi bất cập hại.
Giá trị 0 (mặc định): Video sẽ không tự phát
Giá trị 1: Video sẽ tự phát.
Ví dụ
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
Youtube Playlist (danh sách phát)
Thêm dấu phẩy ngăn giữa các id cần phát (ngoại trừ URL gốc)
<iframe width="420" height="315" src="https://www.youtube.com/embed/rAFxSs1quaI?playlist=lbNPMskXNHo,UBehxEC8c-4">
</iframe>
Youtube Loop (lặp lại video)
Giá trị 0 (mặc định): Video chỉ được phát một lần.
Giá trị 1: Video sẽ lặp lại.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Bộ điều khiển
Giá trị 0: Bộ điều khiển sẽ không hiển thị.
Giá trị 1 (mặc định): Hiển thị bộ điều khiển.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Sử dụng <object> hoặc <embed>
Note: Youtube <object> và <embed> đã bị ngừng sử dụng từ 01/2015, bạn nên chuyển qua dùng <iframe>.
Ví dụ <object> (ngừng sử dụng)
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>
Ví dụ <embed> (ngừng sử dụng)
<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
Trích nguồn từ: (https://www.w3schools.com/html/html_youtube.asp)
