Ngắn gọn thôi: Khi nhúng Audio, Video vào trang web thì bạn cần lưu ý với một số định dạng file mà trình duyệt web hiển thị được.
1) Nhúng Audio
Các định dạng được hỗ trợ tốt
HTML Audio Formats
Có 3 loại định dạng Audio được hỗ trợ tốt trong các loại trình duyệt web: MP3, WAV, và OGG.
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Audio - Media Types
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Cách nhúng code
Tôi có 2 link Audio sau
http://html.zezo.dev/static/horse.mp3
http://html.zezo.dev/static/horse.ogg
Cấu trúc nhúng như sau:
<audio controls autoplay>
<source src="http://html.zezo.dev/static/horse.ogg" type="audio/ogg">
<source src="http://html.zezo.dev/static/horse.mp3" type="audio/mpeg">
Trình duyệt web không hỗ trợ Audio
</audio>
Thuộc tính: controls dùng để hiển thị nút điều khiển âm thanh, và autoplay là tự chạy
2) Nhúng Video
HTML Video Formats
Một số định dạng Video được hỗ trợ tốt: MP4, WebM, và Ogg.
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Cách nhúng video
Tôi có link video như sau: http://html.zezo.dev/static/mov_bbb.mp4
Code nhúng video
<video width="320" height="240" autoplay controls>
<source src="http://html.zezo.dev/static/mov_bbb.mp4" type="video/mp4">
Trình duyệt web không hỗ trợ định dạng video mp4
</video>