Hiện nay, việc nhúng âm thanh và video vào trang web đang trở nên phổ biến hơn bao giờ hết. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng các thẻ audio và video để nhúng âm thanh và video vào trang web của bạn nhé.

1. Cách thêm thẻ audio trong HTML

Để thêm âm thanh vào HTML, chúng ta sử dụng thẻ audio.

1.1 Cú pháp sử dụng

<audio controls>
  <source src="ten-tep-am-thanh.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Trong ví dụ trên:

  • Thẻ audio dùng để tạo một điểm chứa cho âm thanh.
  • Thuộc tính controls được thêm vào để hiển thị thanh điều khiển cho người dùng có thể điều khiển âm thanh (như phát, dừng ...).
  • Trong phần con của audio, có thể sử dụng thẻ source để chỉ định các định dạng âm thanh khác nhau bằng cách sử dụng thuộc tính src và type. Vừa rồi, chúng ta sử dụng định dạng MP3.

1.2 Các thuộc tính trong thẻ audio

>>> Xem thêm bài viết về HTML:

- Tìm hiểu thẻ IMG trong HTML và hướng dẫn cách chèn ảnh trong HTML

- Các cách phổ biến để nhúng CSS vào HTML

- Thẻ a trong HTML

Dười đây là các thuộc tính trong thẻ audio

  • src: Đây là thuộc tính bắt buộc và xác định nguồn dữ liệu âm thanh (URL hoặc đường dẫn tệp) mà bạn muốn hiển thị.
<audio src="audio.mp3"></audio>
  • controls: Thuộc tính này thêm một giao diện điều khiển phát lại âm thanh, bao gồm nút Play/Pause và thanh tua.
<audio src="audio.mp3" controls></audio>
  • autoplay: Thuộc tính này cho phép âm thanh tự động phát sau khi tải trang.
<audio src="audio.mp3" autoplay></audio>
  • loop: Khi được thiết lập, âm thanh sẽ tự động lặp lại phát lại sau khi hoàn thành.
<audio src="audio.mp3" loop></audio>
  • preload: Xác định cách trình duyệt nên tải dữ liệu âm thanh khi trang web được nạp. Các giá trị có thể là "auto" (mặc định), "metadata" (chỉ tải thông tin âm thanh), hoặc "none" (không tải trước).
<audio src="audio.mp3" preload="auto"></audio>
  • muted: Thuộc tính này tắt âm thanh mặc định của âm thanh.
<audio src="audio.mp3" muted></audio>
  • volume: Xác định mức âm lượng của âm thanh, trong khoảng từ 0 (tắt tiếng) đến 1 (âm lượng tối đa).
<audio src="audio.mp3" volume="0.5"></audio>

- controlslist: Xác định các thành phần điều khiển nào sẽ được hiển thị trên giao diện điều khiển của âm thanh. Các giá trị có thể là "nodownload", "nofullscreen", và "noremoteplayback".

<audio src="audio.mp3" controls controlslist="nodownload"></audio>

2. Thẻ video vào HTML

2.1 Cú pháp sử dụng thẻ video

Để nhúng một video vào trang HTMl, chúng ta làm như sau:

<video controls>
  <source src="ten-tep-video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Tương tự như thẻ audio ở trên:

  • Thẻ video dùng để tạo một điểm chứa cho video.
  • Thuộc tính controls được thêm vào để hiển thị thanh điều khiển cho người dùng có thể điều khiển video.
  • Có thể sử dụng thẻ source để chỉ định các định dạng video khác nhau bằng cách sử dụng thuộc tính src và type.

2.2 Các thuộc tính trong thẻ video

  • src: Đây là thuộc tính bắt buộc và xác định nguồn dữ liệu video (URL hoặc đường dẫn tệp) mà bạn muốn hiển thị.
<video src="video.mp4"></video>
  • controls: Thuộc tính này thêm một giao diện điều khiển phát lại video, bao gồm nút Play/Pause và thanh tua.
<video src="video.mp4" controls></video>
  • width và height: Được sử dụng để xác định kích thước của video trong đơn vị pixel.
<video src="video.mp4" width="640" height="360"></video>
  • autoplay: Thuộc tính này cho phép video tự động phát sau khi tải trang.
<video src="video.mp4" autoplay></video>
  • loop: Khi được thiết lập, video sẽ tự động lặp lại phát.
<video src="video.mp4" loop></video>
  • poster: Xác định một hình ảnh được sử dụng làm hình ảnh đại diện cho video cho đến khi video được phát.
<video src="video.mp4" poster="video-poster.jpg"></video>
  • preload: Xác định cách trình duyệt nên tải dữ liệu video. Các giá trị có thể là "auto" (mặc định), "metadata" (chỉ tải thông tin video), hoặc "none" (không tải trước).
<video src="video.mp4" preload="auto"></video>
  • muted: Thuộc tính này tắt âm thanh mặc định của video.
<video src="video.mp4" muted></video>
  • controlslist: Xác định các thành phần điều khiển nào sẽ được hiển thị trên giao diện điều khiển của video. Các giá trị có thể là "nodownload", "nofullscreen", và "noremoteplayback".
<video src="video.mp4" controls controlslist="nodownload"></video>

preload: Xác định cách trình duyệt nên tải video. Các giá trị có thể là "auto" (mặc định), "metadata" (chỉ tải thông tin video), hoặc "none" (không tải trước).


<video src="video.mp4" preload="auto"></video>

3. Một số ví dụ về cách dùng thẻ audio và thẻ video trong HTML

3.1 Thẻ audio trong HTML

<!DOCTYPE html>
<html>

<body>
    <p>Audio Sample</p>

    <!-- audio tag starts here -->
    <audio controls autoplay>
        <source src="source_cua_toi.mp3" type="audio/mp3">
    </audio>
    <!-- audio tag ends here -->

</body>
</html>

Kết quả:

3.2 Thẻ video trong HTML

<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>HTML video tag</h3>



        <p>Adding video on the webpage



        <p>
            <video width="450" height="250" controls preload="auto">
                <source src=
"videocuatoi.mp4"
                    type="video/mp4">
                            </video>
    </center>
</body>
</html>

Kết quả:

4. Các dạng âm thanh được sử dụng

Dưới đây là một số định dạng âm thanh phổ biến được sử dụng trong các trình duyệt:

  • MP3 (MPEG-1 Audio Layer 3): MP3 là định dạng âm thanh phổ biến nhất trên trình duyệt. Nó cung cấp chất lượng tốt và kích thước tệp nhỏ.
  • AAC (Advanced Audio Coding): Cung cấp chất lượng âm thanh tốt.
  • OGG (Ogg Vorbis): OGG là một định dạng âm thanh mã nguồn mở và miễn phí. Với chất lượng âm thanh tốt và kích thước tệp nhỏ, OGG là một lựa chọn phổ biến.
  • WAV (Waveform Audio File Format): Cung cấp chất lượng âm thanh tốt nhưng có kích thước tệp lớn hơn. Thường được sử dụng cho âm thanh chất lượng cao như trong các ứng dụng âm nhạc.
  • WebM Audio: WebM Audio là một phần của định dạng WebM, được phát triển bởi Google, hỗ trợ được âm thanh và video. Nó cung cấp chất lượng tốt và là một lựa chọn phổ biến giúp phát lại đa phương tiện trong trình duyệt.

Tổng kết

Như vậy, chúng ta đã tìm hiểu và sử dụng thẻ audio và thẻ video trong HTML. Có rất nhiều tùy chỉnh và các tính năng thú vị để có thể đưa vào trang web. Các bạn hãy thử nhé!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: