H5學習之15 video audio 標籤，以及視訊 音訊能夠最大可能正常的方式
阿新 • • 發佈：2019-01-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 一般情況下，網頁載入音訊有這樣幾種方法 <p><embed width="200px" height="100px" src="horse.mp3"></embed></p> <!--embed標籤載入音訊--> <br/> <objectwidth="200px" height="100px" data="horse.mp3"></object> <!--object載入音訊--> <br/> <br/> <audio controls="controls"> <source src="horse.mp3" type="audio/mp3" /> <!-- audio標籤 <source src="horse.ogg" type="audio/ogg"/> 如果為了怕瀏覽器無法播放mp3格式的，需要再新增一個ogg格式的音訊。如果播放不了，就會播放ogg的 但是我這裡沒有ogg格式的，就寫一下。 --> </audio> <br/> <br/> <b style="color: red;">但是並不是所有瀏覽器和機器都可以正常播放音訊檔案。所以為了音訊能夠正確播放的3種方式</b> <p>第一種 audio標籤 +embed標籤 <audio controls="controls" width="100px" height="100px"> <source src="horse.mp3" type="audio/mp3"> <sourcesrc="horse.mp3 " type="audio/ogg"/> <embed height="100" width="100" src="horse.mp3"></embed> </audio> <!--使用了兩個不同的音訊格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音訊。如果失敗，程式碼將回退嘗試 <embed> 元素。--> </p> <p>第二種 使用雅虎播放器 <a href="horse.mp3">使用雅虎播放mp3</a> <!-- <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>--> <!--使用雅虎媒體播放器是一個不同的途徑。您只需簡單地讓雅虎來完成歌曲播放的工作就好了。 它能播放 mp3 以及一系列其他格式。通過一行簡單的程式碼，您就可以把它新增到網頁中，輕鬆地將 HTML 頁面轉變為專業的播放列表。 重要：：：：：：但是需要注意。這段程式碼需要放在底部，如果放在這裡會造成載入過慢。放在底部則不會影響速度。 這可能是因為執行到這的話，開啟這個雅虎連結慢的話就不會進行下邊的操作，如果放在下邊就是先載入頁面，再進行對這個連結的訪問。 --> </p> <p>第三種 使用超連結 <a href="horse.mp3">使用超連結播放，如果不做雅虎的設定，瀏覽器會自動呼叫輔助應用程式來播放</a> </p> <br/> <br/> <br/> <p>一般情況下，網頁載入視訊有這樣幾種方法</p> <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"/> <!--<source src="movie.mp4"/>--> <!--需要上傳兩個視訊格式，如果第一個不行，就用第二個。我這裡沒有MP4格式的就只寫一句了--> </video> <br/> <embed src="movie.ogg" width="200" weight="200"></embed> <br/> <object data="movie.ogg" width="200" weight="200"></object> <br/> <b style="color: red;">但是因為裝置和瀏覽器的問題，為了大多數使用者都能播放視訊的3種方式</b> <p >第一種 vido標籤 +object標籤+ embed標籤 <video controls="controls" width="200" height="200"> <source src="movie.ogg" type="video/ogg"/> <object data="movie.ogg" width="200" height="200"> <embed src="movie.ogg" width="200" height="200"></embed> </object> </video> <!--上例中使用了 4 中不同的視訊格式。 HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視訊。 如果均失敗，則回退到 <embed> 元素。--> <p/> <p>第二種:上傳到一些視訊網站上,比如優酷 <embed src="http://player.youku.com/player.php/sid/XMTY1MTY4MDM1Mg==/v.swf" width="480" height="400"></embed> </p> <p>第三種:超連結 使用超連結播放，瀏覽器會自動呼叫輔助應用程式來播放 <a href="movie.ogg">點選此處觀看視訊</a> </p> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script> </body> </html>
具體效果如下：
具體解釋如下：
音訊：
首先列出了3種常規顯示音訊的方法
一般情況下，網頁載入音訊有這樣幾種方法 <p><embed width="200px" height="100px" src="horse.mp3"></embed></p> <!--embed標籤載入音訊--> <br/> <object width="200px" height="100px" data="horse.mp3"></object> <!--object載入音訊--> <br/> <br/> <audio controls="controls"> <source src="horse.mp3" type="audio/mp3" /> <!-- audio標籤 <source src="horse.ogg" type="audio/ogg"/> 如果為了怕瀏覽器無法播放mp3格式的，需要再新增一個ogg格式的音訊。如果播放不了，就會播放ogg的 但是我這裡沒有ogg格式的，就寫一下。 --> </audio>但是要做的還有 相容性，就是因為機器和瀏覽器等不同，有的時候可能不能正常播放音訊，務必讓所有人都能夠正常播放這段音訊。
<b style="color: red;">但是並不是所有瀏覽器和機器都可以正常播放音訊檔案。所以為了音訊能夠正確播放的3種方式</b> <p>第一種 audio標籤 +embed標籤 <audio controls="controls" width="100px" height="100px"> <source src="horse.mp3" type="audio/mp3"> <source src="horse.mp3 " type="audio/ogg"/> <embed height="100" width="100" src="horse.mp3"></embed> </audio> <!--使用了兩個不同的音訊格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音訊。如果失敗，程式碼將回退嘗試 <embed> 元素。--> </p> <p>第二種 使用雅虎播放器 <a href="horse.mp3">使用雅虎播放mp3</a> <!-- <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>--> <!--使用雅虎媒體播放器是一個不同的途徑。您只需簡單地讓雅虎來完成歌曲播放的工作就好了。 它能播放 mp3 以及一系列其他格式。通過一行簡單的程式碼，您就可以把它新增到網頁中，輕鬆地將 HTML 頁面轉變為專業的播放列表。 重要：：：：：：但是需要注意。這段程式碼需要放在最底部，如果放在這裡會造成載入過慢。放在底部則不會影響速度。 這可能是因為執行到這的話，開啟這個雅虎連結慢的話就不會進行下邊的操作，如果放在下邊就是先載入頁面，再進行對這個連結的訪問。 --> </p> <p>第三種 使用超連結 <a href="horse.mp3">使用超連結播放，如果不做雅虎的設定，瀏覽器會自動呼叫輔助應用程式來播放</a> </p> <br/> <br/> <br/>呼叫雅虎播放器程式碼放在了body的最下邊
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>
視訊：
三種常規顯示視訊的方法
<p>一般情況下，網頁載入視訊有這樣幾種方法</p> <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"/> <!--<source src="movie.mp4"/>--> <!--需要上傳兩個視訊格式，如果第一個不行，就用第二個。我這裡沒有MP4格式的就只寫一句了--> </video> <br/> <embed src="movie.ogg" width="200" weight="200"></embed> <!--embed標籤--> <br/> <object data="movie.ogg" width="200" weight="200"></object> <!--object標籤-->
仍然需要做相容性的操作，保證所有使用者都儘可能正常播放視訊
<b style="color: red;">但是因為裝置和瀏覽器的問題，為了大多數使用者都能播放視訊的3種方式</b> <p >第一種 vido標籤 +object標籤+ embed標籤 <video controls="controls" width="200" height="200"> <source src="movie.ogg" type="video/ogg"/> <object data="movie.ogg" width="200" height="200"> <embed src="movie.ogg" width="200" height="200"></embed> </object> </video> <!--上例中使用了 4 中不同的視訊格式。 HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視訊。 如果均失敗，則回退到 <embed> 元素。--> <p/> <p>第二種:上傳到一些視訊網站上,比如優酷 <embed src="http://player.youku.com/player.php/sid/XMTY1MTY4MDM1Mg==/v.swf" width="480" height="400"></embed> </p> <p>第三種:超連結 使用超連結播放，瀏覽器會自動呼叫輔助應用程式來播放 <a href="movie.ogg">點選此處觀看視訊</a> </p>