<!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/> <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> <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"> <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/> <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>