Trước thời điểm HTML5, các audio và video được nhúng vào trang web nhờ các plugin của một nhà cung cấp (như Flash Player của Adobe) hay một ứng dụng được tích hợp trên sẵn trên trình duyệt web và không có một cách thức chuẩn nào về việc nhúng audio hay video. Một plugin, ví dụ như Flash Player, sẽ được kiểm soát duy nhất bởi nhà cung cấp và không được triển khai “mở” đến cộng đồng.

Với HTML5, việc nhúng audio và video vào trang web không cần phần mềm của một nhà cung cấp để xem nội dung và việc truy cập đến video hay audio có thể được thực hiện dễ dàng qua các đoạn mã (script).

HTML5 Video

Một vài khái niệm cơ bản

Video trên web dựa vào các định dạng container (container formats) và các codec:

  • Định dạng container: container hay wrapper dùng để chứa các dữ liệu cần thiết liên quan đến video (hình thức giống như một file ZIP). Các định dạng container của video dùng trong HTML5 là MP4 (.mp4), WebM (.webm), Ogg (.ogg).
  • Video/audio codec: định nghĩa thuật toán dùng để mã hoá và giải mã các luồng dữ liệu đa phương tiện (multimedia data stream). Trong HTML5, các video codec là H.264, Theora, và VP8; audio codec là AAC, Vorbis.
Hỗ trợ trong trình duyệt

Sự hỗ trợ của các trình duyệt (phổ biến nhất) cho các định dạng video có thể thống kê như bảng sau (Yes: hỗ trợ, No: không hỗ trợ):

Trình duyệt MP4 WebM Ogg
IE Yes No No
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes No No
Opera Yes (từ Opera 25) Yes Yes

 

Thẻ <video>

Trong HTML5, cách chuẩn nhất để nhúng một video vào trang web là dùng thẻ <video>.

Thẻ <video> được hỗ trợ trong các phiên bản trình duyệt (phổ biến nhất) như sau:

Chrome IE/Edge Firefox Safari Opera
<video> 4.0+ 9.0+ 3.5+ 4.0+ 10.5+

 

Các thuộc tính cơ bản thường kèm theo thẻ <video>:

  • width: chiều rộng của video trên trang web.
  • height: chiều cao của video trên trang web.
  • controls: dùng để thêm các tính năng điều khiển video như play, pause, volume
  • autoplay: thiết lập chế độ bắt đầu tự động cho video (không làm việc trên Iphone, IPad).
  • loop: thiết lập chế độ thực hiện lại khi video kết thúc.
  • preload: cho phép video bắt đầu tải (giá trị là auto) hay chỉ cho phép các metadata (dữ liệu mô tả cho video) được tải (giá trị là metadata) hay không được phép tải (giá trị none) ngay khi trang tải.
  • poster: xác định hình ảnh hiển thị khi video đang download hay chờ đến khi người dùng kích hoạt nút Play.
  • muted: bật/tắt âm thanh từ video.

Thẻ <video> có thể được dùng kết hợp với thẻ <source> để hỗ trợ nhiều định dạng khác nhau.

Ví dụ về dùng thẻ <video>:


<video width="320" height="240" controls  poster ="image.gif">

<source src="movie1.mp4" type="video/mp4">

<source src="movie2.ogg" type="video/ogg">

Trình duyệt của bạn không hỗ trợ thẻ video.

</video>

Thuộc tính src dùng để chỉ đường dẫn đến video, thuộc tính type xác định định dạng video gồm các giá trị:

Định dạng Giá trị thuộc tính type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 Audio

Trước HTML5, audio (cũng như video) muốn được nhúng vào web thì cần một plug-in (ví dụ flash). Với HTML5, thẻ <audio> cho phép nhúng trực tiếp audio mà không cần một plug-in trung gian nào.

Hỗ trợ trong trình duyệt

Sự hỗ trợ của các trình duyệt (phổ biến nhất) cho các định dạng audio có thể thống kê như bảng sau (Yes: hỗ trợ, No: không hỗ trợ):

Trình duyệt MP3 Wav Ogg
IE Yes No No
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes No
Opera Yes Yes Yes

 

Thẻ <audio>

Trong HTML5, cách chuẩn nhất để nhúng một audio vào trang web là dùng thẻ <audio>.

Thẻ <audio> được hỗ trợ trong các phiên bản trình duyệt (phổ biến nhất) như sau:

Chrome IE/Edge Firefox Safari Opera
<audio> 4.0+ 9.0+ 3.5+ 4.0+ 10.5+

 

Các thuộc tính cơ bản thường kèm theo thẻ <audio>:

  • controls: dùng để thêm các tính năng điều khiển audio như play, pause, volume
  • autoplay: thiết lập chế độ bắt đầu tự động cho audio.
  • loop: thiết lập chế độ thực hiện lại khi audio kết thúc.
  • preload: cho phép audio bắt đầu tải (giá trị là auto) hay chỉ cho phép các metadata (dữ liệu mô tả cho audio) được tải (giá trị là metadata) hay không được phép tải (giá trị none) ngay khi trang tải.
  • muted: bật/tắt âm thanh từ audio.

Thẻ <audio> có thể được dùng kết hợp với thẻ <source> để hỗ trợ nhiều định dạng khác nhau.

Ví dụ về dùng thẻ <audio>:


<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Trình duyệt của bạn không hỗ trợ thẻ audio.

</audio>

Thuộc tính src dùng để chỉ đường dẫn đến audio, thuộc tính type xác định định dạng audio gồm các giá trị:

Định dạng Giá trị thuộc tính type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/ogg

 

Phương thức (methods), thuộc tính (properties), sự kiện (events)

HTML5 cung cấp các phương thức, thuộc tính, sự kiện DOM cho phần tử <video> và <audio> cho phép chúng ta có thể tương tác với video hay audio như ý. Danh sách các phương thức, thuộc tính, sự kiện có thể tham khảo tại https://www.w3schools.com/tags/ref_av_dom.asp

Học HTML & CSS >