MIS2000Lab.的「HTML5 認證考試，從零開始」#18--HTML5與多媒體的整合

DAY 18

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 18 篇

html asp.net 網頁 video api 鐵人賽網頁程式 html5 mis2000lab 網頁設計audio html

mis2000lab

2014-10-13 09:46:25

2860 瀏覽

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110
上一篇文章提到HTML5 File API

http://ithelp.ithome.com.tw/question/10159485

這篇文章會提到<video>與<audio>標籤

HTML5提供新的<video>標籤讓您在網頁裡面就能播放影片，而不需要外掛軟體（pug-in），

這是HTML5的原生功能，對於平板、智慧手機等行動周邊更有效益。

播放一段MP4檔案的寫法，如同<img>請把多媒體檔案的目錄（路徑）與檔名寫在src屬性裡面：
<video src="MyVideo.mp4"></video>

完整的範例如下：

[background=#FFFF00]<video [/background][background=#FFFF00]src="MyVideo.mp4"[/background]

[background=#FFFF00]width="300" height="200"[/background]

[background=#FFFF00]poster="MyPoster.jpg"[/background][background=#FFFF00] 註：以這張圖片來表示這段影片。[/background]

[background=#FFFF00]autoplay="autoplay" 註：自動播放。[/background]

[background=#FFFF00]muted="muted"[/background]

[background=#FFFF00]controls="controls"[/background]

[background=#FFFF00]loop="loop" > 註：重複播放。[/background]

[background=#FFFF00]</video>[/background]

==== <video>的<source>標籤可支援多種影片格式 ====

如果在<video>標籤裡面寫了多個<source>標籤時，

瀏覽器遇見無法播放的影片格式就會自動使用下一個影片來取代。

[background=#FFFF00]<video poster="MyPoster.jpg" autoplay controls>[/background]

[background=#FFFF00]<source src="MyVideos/MyVideo.mp4" [/background][background=#FFFF00]type='video/mp4'[/background][background=#FFFF00] />[/background]

[background=#FFFF00]<source src="MyVideos/MyVideo.webm" [/background][background=#FFFF00]type='video/webm[/background][background=#FFFF00]' />[/background]

[background=#FFFF00]<source src="MyVideos/MyVideo.ogv" [/background][background=#FFFF00]type='video/ogg'[/background][background=#FFFF00] />[/background]

[background=#FFFF00][/background]

[background=#FFFF00][/background]

[background=#FFFF00]<a href="MyVideos/MyVideo.webm">[/background]

[background=#FFFF00]如果不能播放影片，請按此連結</a>[/background]

[background=#FFFF00]</video>[/background]

==== 以JavaScript程式碼與影片互動 ====

function createVideoElement(nameOfVideoFile) {
// 創建一個 video物件並為它設定屬性。
var newVideo = document.createElement("video");

newVideo.src = nameOfVideoFile;
newVideo.loop = true;
newVideo.autoplay = true;
newVideo.controls = true;
newVideo.poster = "ImageLoading.png";

// 在現有網頁內，加入video物件。
var hostElem = document.getElementById("videoDir");
hostElem.appendChild(newVideo);
}

video的事件（event）如下：

aVideo.addEventListener("loadedmetadata", function() {
alert("Video duration: " + aVideo.duration);
}, false);

aVideo.addEventListener("loadeddata", function() {
aVideo.play();
}, false);

aVideo.addEventListener("timeupdate", function() {
alert("Video current time: " + aVideo.currentTime);
}, false);

==== 使用<audio>標籤來播放音樂 ====

如同上一節的<video>標籤播放影片，HTML5提供的<audio>標籤可以播放音樂而不需要外掛軟體。

src屬性，用法如同<img>與<video>請把多媒體檔案的目錄（路徑）與檔名。
<audio src="MyAudio.mp3"></audio>

可以透過JavaScript來播放音樂，本節的<audio>大致與上一節的<video>雷同，使用到

controls屬性（播放、暫停）、autoplay屬性、loop屬性（重複播放）。

<audio>也可以搭配<source>標籤在內，就連事件也跟<video>雷同。

不要走開，馬上回來

下一篇文章 http://ithelp.ithome.com.tw/question/10159772

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110