iT邦幫忙

DAY 18
5

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

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

  • 分享至 

  • xImage
  •  

===============================================
本系列文章已經集結出書
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]<!-- 可以放置flash或silverlight檔案作為備用 -->[/background]

[background=#FFFF00]<!-- 也可以放一段純文字說明,以免使用者的瀏覽器不支援<vedio>標籤 -->[/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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#17--與檔案互動的HTML5 File API
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#19--HTML5 Geolocation API
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言