html video youtube
Cách dễ nhất để phát video bằng HTML là sử dụng YouTube.
Bạn đang gặp khó khăn với các định dạng video?
Việc chúng ta chuyển đổi video sang các định dạng phù hợp để được trình duyệt hỗ trợ có thể khó khăn và tốn thời gian. Một giải pháp dễ dàng hơn là cho phép YouTube phát video trên trang web của chúng ta.
YouTube sẽ hiển thị một id (như tgbNymZ7vqY) khi chúng ta lưu (hoặc phát) video.
Chúng ta có thể sử dụng id này và tham chiếu đến video của mình trong mã HTML.
Phát video YouTube bằng HTML
Để phát video từ youtube trên một trang web, chúng ta hãy làm như sau:
- Tải video lên YouTube
- Ghi lại id video
- Xác định phần tử
<iframe>trong trang web - Dùng thuộc tính
srctrỏ đến URL video - Sử dụng các thuộc tính
widthvàheightđể chỉ định vị trí của trình phát video - Thêm các thông số khác vào URL để trình chiếu video (xem bên dưới)
Ví dụ
<iframe width="420" height="345" src="https://www.youtube.com/embed/LNEUi1YinlE"> </iframe>
Tự động phát trên YouTube + Tắt tiếng
Chúng ta có thể để video của mình bắt đầu tự động phát khi người dùng truy cập trang bằng cách thêm autoplay=1 vào URL YouTube. Tuy nhiên, việc tự động bắt đầu video sẽ gây khó chịu cho khách truy cập.
Thêm mute=1 sau autoplay=1 để video của chúng ta bắt đầu phát tự động (nhưng bị tắt tiếng).
Ví dụ
<iframe width="420" height="345" src="https://www.youtube.com/embed/LNEUi1YinlE?autoplay=1&mute=1"> </iframe>
Danh sách phát trên YouTube
Danh sách video để phát được phân tách bằng dấu phẩy (ngoài URL gốc).
Vòng lặp YouTube
Chúng ta thêm loop=1 để video của chúng ta phát sẽ lặp lại mãi mãi.
Giá trị 0 (mặc định): Video sẽ chỉ phát một lần.
Giá trị 1: Video sẽ lặp lại (mãi mãi).
Ví dụ: Playlist và vòng lặp youtube
<iframe width="420" height="345" src="https://www.youtube.com/embed/LNEUi1YinlE?playlist=LNEUi1YinlE&loop=1"> </iframe>
Kiểm soát YouTube
Thêm controls=0 để không hiển thị các nút điều khiển trong trình phát video.
Giá trị 0: Các điều khiển trình phát không hiển thị.
Giá trị 1 (mặc định): Màn hình điều khiển trình phát.
Ví dụ
<iframe width="420" height="345" src="https://www.youtube.com/embed/LNEUi1YinlE?controls=0"> </iframe>