Mất 2 phút đọc

Thành Phần Video, Audio Trong HTML5

Trong bài viết này, Ứng dụng free sẽ cùng các bạn tìm hiểu về Thành Phần Video, Audio Trong HTML5

Tại sao phải thêm video, âm thanh vào trang web?

  • Tạo nên trang web hấp dẫn
  • Thu hút sự truy cập của người duyệt với website
  • Là một cách tiếp cận người dùng

Trước khi có HTML5, làm cách nào để chèn video, âm thanh vào trang web?

  • Phải sử dụng plug-ins của các công ty thứ 3 ( third party)

HTML5 chèn video, âm thanh vào trang web như thế nào ?

  • Cung cấp thành phần HTML video chạy trong trình duyệt
  • Tích hợp thêm với JavaScript
  • Câu lệnh:

  • Autoplay: Thuộc tính quy định với trình duyệt đoạn video sẽ được chơi ngay khi trang được load

HTML5 cung cấp thêm các điều khiển cho video:

  • Controls: Cung cấp trình điều khiển video trên các trình duyệt khác nhau
  • Poster: Thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu của video
  • Width, height: Thuộc tính chỉ định kích thước của video
  • Audio: Thuộc tính này cho phép tắt tiếng của video, giá trị ‘muted
  • Loop: Thuộc tính này sẽ kích hoạt đoạn video phát lại 
  • Preload: Cho phép tải đoạn video ngay khi tải trang web, giảm thời gian tải video

Thêm các thuộc tính để video được hỗ trợ trên nhiều trình duyệt:

  • Có nhiều định dạng, codec cho video nhưng không phải lúc nào cũng hỗ trợ HTML5 video hiển thị trên các trình duyệt
  • Định dạng Ogg:
    • Định dạng theo chuẩn mã nguồn mở
    • Được hỗ trợ bởi các trình duyệt Chrome, Firefox, Opera
  • Định dạng MP4:
    • Sử dụng codec H.264 và âm thanh sử dụng codec AAC
    • Được hỗ trợ bởi IE, Safari, IOS và Android
  • Để đoạn video ở cả 2 định dạng Ogg và MP4 sẽ giúp hiển thị tốt trên các trình duyệt và thiết bị

  • Thêm thuộc tính type, codecs: Mô tả cấu trúc kiểu của file ogg, mp4

Điều khiển video với JavaScript:

  • Khởi tạo hàm trong JavaScript để thực hiện các sự kiện: Play, Pause, …

Chèn âm thanh vào trang web sử dụng HTML5:

KẾT LUẬN: Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để Ứng dụng free   giải đáp thắc mắc nhé! Cảm ơn các bạn đã theo dõi bài viết.
5/5 - (1 Bình chọn)
49 lượt xem

28/09/2022 Blog Tin Học

Bài viết liên quan

Block "5_tab_footer" not found