Tìm hiểu YouTube Videos trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tìm hiểu YouTube Videos trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Cách đơn giản nhất để phát video bằng HTML là sử dụng YouTube.

Khó khăn về các định dạng video

Như các bạn đã biết, cần phải chuyển đổi các video sang các định dạng khác nhau để làm cho chúng chạy trong tất cả các trình duyệt. Việc này có thể khó khăn và mất nhiều thời gian.

Một giải pháp dễ dàng hơn là để cho YouTube phát các video trong trang web của bạn.

Id video trên YouTube

YouTube sẽ hiển thị id (như XGSy3_Czz8k), khi bạn lưu (hoặc phát) một video. Bạn có thể sử dụng id này, và tham khảo đoạn video của bạn trong mã HTML.

Phát video YouTube bằng HTML

Để phát video của bạn trên trang web, hãy thực hiện theo các bước sau:

  • Tải lên video lên YouTube
  • Ghi lại id video
  • Xác định một phần tử <iframe> trong trang web của bạn
  • Để thuộc tính src chỉ ra URL video
  • Sử dụng các thuộc tính width và height để chỉ định kích thước của trình phát
  • Thêm bất kỳ tham số khác vào URL (xem bên ví dụ bên dưới)

Sử dụng iframe (được khuyến nghị):

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k”>
</iframe>

Tự động chạy video trên YouTube

Bạn có thể bắt đầu tự động phát video khi người dùng truy cập vào trang đó bằng cách thêm một tham số đơn giản vào URL YouTube.

Lưu ý: 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 một video có thể gây khó chịu cho người truy cập, gây nhiều trải nghiệm không tốt.

Giá trị 0 (mặc định): video sẽ không tự động phát khi người dùng truy cập trang web.

Giá trị 1: video sẽ tự động phát khi người dùng truy cập.

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1″>
</iframe>

Danh sách phát video trên YouTube

Danh sách video được phân tách bằng dấu phẩy (ngoài URL ban đầu).

Vòng lặp phát video trên Youtube

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

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1″>
</iframe>

Điều khiển video trên Youtube

Giá trị 0: nút điều khiển không hiển thị.

Giá trị 1 (mặc định): nút điều khiển màn hình hiển thị.

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?controls=0″>
</iframe>

YouTube – sử dụng <object> or <embed>

Lưu ý: YouTube <object> và <embed> đã bị phản đối từ tháng 1 năm 2015. Bạn nên thay thế bằng cách sử dụng <iframe>.

Sử dụng <object> (không dùng nữa):

<object width=”420″ height=”315″
data=”https://www.youtube.com/embed/XGSy3_Czz8k”>
</object>

Sử dụng <embed> (không dùng nữa):

<embed width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k”>