Hi i,m JinXiang
? 前言 ?
本篇文章主要介紹在HTML中插入音頻和視頻以及部分理論知識
🍉歡迎點贊 👍 收藏 ?留言評論 📝私信必回喲😁
🍉博主收將持續更新學習記錄獲，友友們有任何問題可以在評論區留言
目錄
一、音頻標簽：audio
1、簡介
2、使用
二、視頻標簽：video
1、簡介
2、使用
三、使用音頻（audio）和視頻（video）需要注意事項：
一、音頻標簽：audio
1、簡介
在HTML中，`<audio>`標簽用于嵌入音頻文件，使其可以在網頁中播放。`<audio>`標簽具有以下特點：
- ?`<audio>`標簽可以嵌入多種音頻格式，如MP3、OGG、WAV等。
- ?通過`src`屬性指定音頻文件的URL，通過`controls`屬性指定是否顯示播放器控件。
- ?可以使用`<source>`標簽指定多個音頻文件，瀏覽器會選擇支持的格式進行播放。
- ?可以使用`<track>`標簽添加音頻描述、字幕等元數據。
- ?支持JavaScript操作，如控制播放、暫停、音量等。
- ?可以通過CSS樣式控制音頻的外觀。
- ?支持事件，如播放、暫停、結束等。
總的來說，`<audio>`標簽是在網頁中嵌入音頻文件的一種簡單而方便的方式，可以幫助網頁設計師更加靈活的設計網頁。
?
2、使用
1. 創建`<audio>`標簽，并設置`src`屬性，指定音頻文件的URL。
<audio src="music.mp3"></audio>2. 添加`controls`屬性，顯示播放器控件。
<audio src="music.mp3" controls></audio>3. 添加`<source>`標簽指定多個音頻文件，瀏覽器會選擇支持的格式進行播放。
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"><source src="music.wav" type="audio/wav">
</audio>4. 使用JavaScript來控制音頻的播放、暫停和音量等操作。
<audio id="music" src="music.mp3"><p>Your browser does not support the audio element.</p>
</audio>
<button onclick="document.getElementById('music').play()">Play</button>
<button onclick="document.getElementById('music').pause()">Pause</button>
<button onclick="document.getElementById('music').volume += 0.1">Increase Volume</button>
<button onclick="document.getElementById('music').volume -= 0.1">Decrease Volume</button>除了上述基本用法外，`<audio>`標簽還支持多種其他屬性和事件，如`autoplay`屬性、`loop`屬性、`ended`事件等等，根據需要進行設置即可。
二、視頻標簽：video
1、簡介
HTML中`<video>`標簽用于添加視頻到網頁中。通過`<video>`標簽，我們可以在網頁上播放本地或者在線的視頻。
- `<video>`標簽可以添加多個屬性和事件，其中一些常用的屬性和事件如下：
- ?`src`: 視頻文件的 URL 地址。
- ?`autoplay`: 自動播放音頻。
- ?`controls`: 顯示播放器控件。
- ?`loop`: 循環播放視頻。
- ?`width` 和 `height`: 視頻的寬度和高度。
- ?`poster`: 設定視頻的封面。
在使用`<video>`標簽時，可以嵌套`<source>`標簽，這樣可以添加多個視頻文件，瀏覽器會自動選擇支持的視頻格式進行播放。
?
2、使用
1. 在`<video>`標簽中設置視頻文件的`src`屬性，指定視頻文件的URL地址。如果有多個格式的視頻文件，在`<video>`標簽中添加多個`<source>`標簽，瀏覽器會自動選擇支持的格式進行播放。
<video width="640" height="360" controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogg" type="video/ogg">
</video>2. 可以使用`controls`屬性來顯示播放器控件，例如播放、暫停、音量、全屏等。
<video width="640" height="360" controls><source src="video.mp4" type="video/mp4">
</video>3. 如果不想使用瀏覽器默認的控件，可以使用JavaScript控制播放器，在播放器上添加自定義控件。可以使用事件`play`, `pause`, `seeked`, `volumechange`等來處理播放器的行為。
<video id="myVideo" width="640" height="360"><source src="video.mp4" type="video/mp4">
</video>
<button onclick="playPause()">播放/暫停</button>
<script>var video = document.getElementById("myVideo");function playPause() {if (video.paused) {video.play();} else {video.pause();}}
</script>4. 還可以設置視頻的尺寸、自動播放、循環等屬性。
<video width="640" height="360" autoplay loop><source src="video.mp4" type="video/mp4">
</video>上面這段代碼將視頻設置為自動播放，并且設置為循環播放。
?
三、使用音頻（audio）和視頻（video）需要注意事項：
- 1、瀏覽器支持的音頻和視頻格式不同，需要在`<source>`標簽中提供不同格式的文件來兼容不同的瀏覽器。
- 2、在設置`src`屬性時，應該使用相對路徑或絕對路徑，避免使用相對于當前頁面的路徑。
- 3、使用`controls`屬性會顯示默認的播放器控件，但是在移動設備上默認控件可能無法顯示或不夠友好。此時可以使用JavaScript自定義控件。
- 4、在不同的瀏覽器和操作系統下，對于媒體的支持情況也可能不同，因此需要在不同的瀏覽器和設備上進行測試。
- 5、如果使用自定義控件，需要注意控件的可用性和兼容性，避免在某些瀏覽器或設備上無法使用。
- 6、瀏覽器默認情況下不會自動播放媒體文件，需要用戶手動點擊播放按鈕。如果希望實現自動播放的效果，需要在設置`<audio>`或`<video>`標簽時添加`autoplay`屬性。
- 7、使用媒體文件會占用網站的帶寬，需要注意使用合適的壓縮方法來減小文件大小，避免對網站性能造成負面影響。
總之，在使用
<audio>和<video>標簽時，需要進行充分的測試和優化，以提供良好的用戶體驗和兼容性。
?
總結不易，希望uu們不要吝嗇親愛的👍喲(＾Ｕ＾)ノ~ＹＯ！！如有問題，歡迎評論區批評指正😁
?
?
)
