HTML - 媒體（七）
阿新 • • 發佈：2020-08-06
HTML 媒體
HTML 多媒體
- Web 上的多媒體指的是音效、音樂、視訊和動畫
- 多媒體可以是你聽到或看到的任何內容，包括文字、圖片、音樂、音效、錄音、電影、視訊、動畫等
HTML 多媒體標籤
| 標籤 | 描述 |
|---|---|
| <embed> | 定義內嵌物件，不能用在 HTML 4 |
| <object> | 定義內嵌物件 |
| <param> | 定義物件引數 |
| <audio> | 定義聲音內容 |
| <video> | 定義一個視訊或影片 |
| <source> | 定義了 media 元素的多媒體資源（<video> 和 <audio>） |
| <track> | 規定 media 元素的字幕檔案或其他包含文字的檔案（<video> 和 <audio>） |
HTML 外掛
<object> 元素
- 該標籤用於在網頁中嵌入物件（Java小程式、PDF閱讀器、Flash播放器）
例項：
<object width="400" height="50" data="bookmark.swf"></object>
- <object> 元素同樣可用於包含 HTML 檔案
例項：
<object width="100%" height=="500px" data="test.html"></object>
- 也可以插入一張圖片
例項：
<object data="test.jpeg"></object>
<embed> 元素
- <embed> 元素表示一個 HTML Embed 物件
- <embed> 元素沒有關閉標籤，不能使用代替文字
例項：
<embed width="100%" height="500px" src="test.html">
<embed src="default.jpeg">
HTML 音訊
使用外掛
使用 <embed> 元素
<embed width="100" heith="50" src="bird.mp3">
使用 <object> 元素
<object width="100" height="50" data="bird.mp3"></object>
使用 <audio> 元素
- <audio> 標籤是 HTML 5 標籤，在 HTML 4 中是無效的
- 使用<audio> 標籤必須把音訊檔案轉換為不同格式
以下例項使用了不同格式的音訊檔案，HTML 5 的 <audio> 元素會嘗試以mp3或ogg來播放音訊，如果失敗，程式碼將嘗試<embed>元素
<audio controls hetght="100" width="100">
<source src="bird.mp3" type="audio/mpeg">
<source src="bird.ogg" type="audio/ogg">
<embed height="50" width="50" src="bird.mp3">
</audio>
使用超連結
<a href="bird.mp3">Play the sound</a>
HTML 視訊
使用外掛
使用 <embed> 元素
<embed width="100" heith="50" src="movie.mp4">
使用 <object> 元素
<object width="100" height="50" data="movie.mp4"></object>
使用 <video> 元素
- <video> 標籤定義了一個視訊或影片
- <video> 標籤在所有現代瀏覽器中都支援
以下例項使用了不同格式的音訊檔案，HTML 5 的 <video> 元素會嘗試以mp4或ogg和webm來播放音訊，如果失敗，程式碼將嘗試<embed>元素
<video controls hetght="340" width="200">
<source src="movie.mp4" type="video/mp4">
<source src="bird.ogg" type="video/ogg">
<source hsrc="bird.webm" type="video/webm">
<embed src="movie.swf" width="320" height="240">
</video>
使用超連結
<a href="movie.mp4">Play a video file</a>