Thẻ <source> là một trong những thẻ HTML quan trọng dùng để cung cấp nguồn đa phương tiện, như là video hoặc âm thanh, trong các trang web. Thẻ này không tự hoạt động độc lập mà nó phải nằm bên trong thẻ cha như <video> hay <audio> để đa phương tiện có thể được hiển thị và phát trên trang web.
1. Cách hoạt động của thẻ <source>
Thẻ <source> được sử dụng để chỉ định nhiều nguồn dữ liệu cùng một lúc. Điều này rất hữu ích khi bạn muốn đảm bảo rằng nội dung đa phương tiện có thể hoạt động trên nhiều trình duyệt khác nhau, mỗi trình duyệt có thể hỗ trợ một hoặc nhiều định dạng khác nhau.
Thẻ <source> gồm có các thuộc tính cơ bản như sau:
- src: Đường dẫn đến tệp đa phương tiện.
- type: Loại MIME của tệp đa phương tiện.
- media: Đặc tả điều kiện áp dụng.
2. Sử dụng thẻ <source> trong thẻ <video>
Để cung cấp các nguồn video cho một trang web, bạn có thể sử dụng nhiều thẻ <source> bên trong thẻ <video>.
Ví dụ:
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
Trình duyệt của bạn không hỗ trợ video.
</video>
Trong ví dụ trên, có ba nguồn video được cung cấp với các định dạng khác nhau: MP4, OGV, và WEBM. Trình duyệt sẽ kiểm tra từng nguồn một và phát loại đầu tiên mà nó hỗ trợ.
3. Sử dụng thẻ <source> trong thẻ <audio>
Tương tự như video, âm thanh cũng có thể sử dụng nhiều nguồn khác nhau.
Ví dụ:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
Trình duyệt của bạn không hỗ trợ âm thanh.
</audio>
Trong ví dụ này, ba nguồn âm thanh được cung cấp với các định dạng khác nhau: MP3, OGG, và WAV.
4. Thuộc tính media
Thuộc tính media của thẻ <source> được sử dụng để chỉ định các điều kiện áp dụng cho nguồn dữ liệu đó. Điều này thường hữu ích khi bạn muốn cung cấp các phiên bản khác nhau của nội dung dựa trên kích thước màn hình hoặc độ phân giải của thiết bị.
Ví dụ:
<video controls width="600">
<source src="movie-small.mp4" type="video/mp4" media="(max-width: 799px)">
<source src="movie-large.mp4" type="video/mp4" media="(min-width: 800px)">
Trình duyệt của bạn không hỗ trợ video.
</video>
5. Kết luận
Việc sử dụng thẻ <source> trong HTML giúp các nhà phát triển web có thể tích hợp đa phương tiện vào trang web của mình một cách linh hoạt và tiện lợi. Bằng cách cung cấp nhiều định dạng video và âm thanh, bạn có thể đảm bảo rằng nội dung của mình sẽ được phát trên đa dạng các trình duyệt và thiết bị, mang lại trải nghiệm người dùng tốt nhất. Hơn nữa, việc sử dụng thuộc tính media giúp tùy chỉnh nội dung dựa trên điều kiện thiết bị, tăng tính tương thích và tối ưu hóa cho các nền tảng khác nhau.
Comments