H5學習之15 video audio 標籤,以及視頻 音頻能夠最大可能正常的方式

<!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> 元素會嘗試播放以 mp4ogg  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> 元素會嘗試播放以 mp4ogg  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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章