HTML (007) HTML5 媒體
阿新 • • 發佈：2022-05-13
一、HTML5 Video(視訊)
HTML5 規定了一種通過 video 元素來包含視訊的標準方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援Video標籤。
</video>
注意: Internet Explorer 8 或者更早的IE版本不支援
1、語法：
同時
標籤之間插入的內容是提供給不支援 video 元素的瀏覽器顯示的。
2、視訊格式與瀏覽器的支援
- MP4（MIME-type：video/mp4）= 帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案
- WebM （MIME-type：video/webm）= 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案
- Ogg （MIME-type：video/ogg）= 帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
注意：Internet Explorer和Safari目前只支援MP4。
3、HTML5 Video 標籤
-
：定義多種媒體資源,比如
二、HTML5 Audio(音訊)
HTML5 規定了在網頁上嵌入音訊元素的標準，即使用
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支援 audio 元素。 </audio>
注意: Internet Explorer 8 及更早IE版本不支援
1、語法：
control 屬性供新增播放、暫停和音量控制元件。
在 之間你需要插入瀏覽器不支援的
2、音訊格式及瀏覽器支援
目前,
Internet Explorer 9+只支援MP3,Safari 5+只支援MP3, Wav。
- MP3：audio/mpeg
- Ogg：audio/ogg
- Wav：audio/wav
3、HTML5 Audio 標籤
-
：規定了多媒體資源, 可以是多個，在
3、使用 DOM 進行控制
HTML5
其中的方法用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設定。其中的 DOM 事件能夠通知您，比方說，
例中簡單的方法，向我們演示瞭如何使用
例項 ： 為視訊建立簡單的播放/暫停以及調整尺寸控制元件：
<div class="example_code notranslate">
<br>
<div style="text-align:center">
<button onclick="playPause()">播放/暫停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">縮小</button>
<button onclick="makeNormal()">普通</button>
<br><br>
<video id="video1" width="600">
<source src="/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="/try/demo_source/mov_bbb.ogg" type="video/ogg">你的瀏覽器不支援 HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=600;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=480;
}
</script>
</div>
上面的例子呼叫了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。
三、IE8以下符合web標準的媒體播放器程式碼
1、線上媒體播放--Google Video and YouTube
其實就是FLASH檔案的呼叫
<html>
<body>
<object type="application/x-shockwave-flash" data="http://www.tudou.com/v/MzanakPLYV4"
width="400" height="326" id="VideoPlayback">
<param name="movie" value="http://www.tudou.com/v/MzanakPLYV4">
<param name="allowScriptAcess" value="sameDomain">
<param name="quality" value="best">
<param name="bgcolor" value="#FFFFFF">
<param name="scale" value="noScale">
<param name="salign" value="TL">
<param name="FlashVars" value="playerMode=embedded">
</object>
</body>
</html>
2、Windows Media Player 檔案
下面的程式碼沒有Windows Media Player特有的classid。
<html>
<body>
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src" value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>
</body>
</html>