[HTML]HTML5 New Feature - video tag
HTML5新增Video標籤，目前支援的瀏覽器有
該標籤主要是能讓以往必須使用Activex或是Plug-In才能播放的影片可以直接交由瀏覽器去撥放，使用上就像下面這樣：
<video src="movie.webm" poster="movie.jpg" controls>
This is fallback content to display if the browser
does not support the video element.
</video>
簡單的使用只要透過video標籤的src attribute去指定撥放的影片就可以了。這邊要注意的是每個瀏覽器在實作上有些差異，並不是每個瀏覽器都能吃所有的影片格式，目前支援的狀況大概如下圖所示(圖片來自HTML5 video - wiki)：
若要能兼容於不同的瀏覽器，我們可以找出兼容的影片格式，使用較為兼容的影片格式來播放，也可以同時提供不同影片格式的影片來源讓瀏覽器選取適合的播放，或是加入當影片不支援時的處理動作(可以顯示錯誤訊息，或是採用舊有的embed方式去撥放)。
<video>
<source src="video.ogg">
<source src="video.m4v">
Sorry~no support video or browser
</video>
接著讓我們更進一步的了解Video標籤，Video標籤具備下列Attribute，在編寫HTML時可視各自的需求使用。
| Attribute | Description |
| autoplay | 自動撥放 |
| controls | 顯示播放控制列 |
| height | 撥放器高度 |
| loop | 重複播放 |
| muted | 靜音 |
| poster | Specifies an image to be shown while the video is downloading, or until the user hits the play button |
| preload | Specifies if and how the author thinks the video should be loaded when the page loads |
| src | 影片位置 |
| width | 撥放器寬度 |
像是src attribute是用來指定要播放的影片。
controls attribute是用來指定影片播放器必須要提供播放控制列。
autoplay attribute是用來指定在播放器載入後立即自動撥放影片。
muted attribute是用來指定將影片播放器設為靜音。
而poster attribute則是設定撥放器在播放前要顯示的圖片。
有興趣的也可以直接至w3schools提供的Editor或是HTML5 Video element maker去嚐試語法並觀察其變化
除了video標籤的attribute之外，也可以透過程式去做些控制，像是播放/暫停影片，或是取得目前播放位置...等。
| play() | 播放影片 |
| pause() | 暫停播放 |
| currentTime | 目前影片播放位置 |
| readyState |
影片讀取狀態
|
| paused | 影片是否為暫停狀態 |
| muted | 是否為靜音。 |
| volume | 取得或設定音量值。 |
| ended | 播放指標是否已經到最後。 |
這邊實際實作個簡單的範例，HTML中放入video標籤並指定撥放的影片位置，並加個按鈕來控制影片的播放或是暫停，而在JavaScript中則是取得video與button的element，透過video element去呼叫play或是pause，以達到我們期望的效果。
<html>
<body>
<video id="video">
<source src="video.mp4" type="video/mp4"/>
</video>
<input type="button" id="play" value="Play">
<script>
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var video = document.getElementById('video');
var togglePlay = document.getElementById('play');
addEvent(togglePlay, 'click', function () {
if (video.paused) {
video.play();
this.value = "pause";
} else {
video.pause();
this.value = "play";
}
});
</script>
</body>
</html>
