HTML5 的視頻播放事件想必大家已經期待很久了吧，在HTML4.1、4.0之前我們如果在網頁上播放視頻無外乎兩種方法：
第一種：安裝FLASH插件或者微軟發佈的插件
第二種：在本地安裝播放器，在線播放組件之類的
因爲並不是所有的瀏覽器都安裝了FLASH插件，就算安裝也不一定所有的都能安裝成功。像蘋果系統就是默認禁用FLASH的，安卓雖然一開始的時候支持FLASH，但是在安卓4.0以後也開始不支持FLASH了，看來FLASH是比較消耗CPU的。
所以針對這一情況，HTML5做了 比較大的改動，新加了< video>標籤。
< video>標籤屬性
第一種：傳統方式
<video src="move.mp4" controls="controls">
</video>第二種：如果瀏覽器不支持的話會進行提示
<video src="move.mp4" controls="controls">
瀏覽器不支持HTML5視頻播放
</video>第三種：如果瀏覽器不支持播放格式會嘗試其他格式播放，如果不支持第一個就轉第二個播放
<video width="500" controls="controls">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
</video>屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒後馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放後再次開始播放。 |
| preload | preload | 如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。如果使用 “autoplay”，則忽略該屬性 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
HTML5視頻API
獲得video標籤，這裏是DOM對象
varvideo = document.getElementById('videoID');也可以通過jQuery的方法，如下：
varvideo = $('#videoID').get(0);載入視頻：load() ，
播放視頻：play() ，
暫停：pause() ，
快進10秒：currentTime+=10
播放速度增加：playbackRate++
播放速度增加0.1：playbackRate+=0.1
音量增加：volume+=0.1
靜音：muted=true
播放器示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5視頻教程-視頻播放功能</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var video = $('#myvideo');
$("#play").click(function(){ video[0].play(); });
$("#pause").click(function(){ video[0].pause(); });
$("#go10").click(function(){ video[0].currentTime+=10; });
$("#back10").click(function(){ video[0].currentTime-=10; });
$("#rate1").click(function(){ video[0].playbackRate+=2; });
$("#rate0").click(function(){ video[0].playbackRate-=2; });
$("#volume1").click(function(){ video[0].volume+=0.1; });
$("#volume0").click(function(){ video[0].volume-=0.1; });
$("#muted1").click(function(){ video[0].muted=true; });
$("#muted0").click(function(){ video[0].muted=false; });
$("#full").click(function(){
video[0].webkitEnterFullscreen(); // webkit類型的瀏覽器
video[0].mozRequestFullScreen(); // FireFox瀏覽器
});
});
</script>
</head>
<video id="myvideo" src="zhuoyaoji.mp4" width="400">
你的瀏覽器不支持html5視頻播放
</video>
<hr>
<button id="play">播放</button>
<button id="pause">暫停</button>
<button id="go10">快進10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度-</button>
<button id="volume1">聲音+</button>
<button id="volume0">聲音-</button>
<button id="muted1">靜音</button>
<button id="muted0">解除靜音</button>
<button id="full">全屏</button>
</body>
</body>
</html>