HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）
只需要写如下代码：
<body style="background-color:#8EEE5EE;"> <div id="big_wrapper"> <video src="Introduction.mp4" width="640" height="360" poster= "images/me.jpg" loop controls></video>
<!--autoplay和poster="images/me.jpg"一般不同时使用，controls是出现控制栏--> </div> </body>
Method
| 方法method | 描述description |
|---|---|
| addTextTrack() | 为音视频加入一个新的文本轨迹 |
| canPlayType() | 检查指定的音视频格式是否得到支持 |
| load() | 重新加载音视频标签 |
| play() | 播放音视频 |
| pause() | 暂停播放当前的音视频 |
properties
| 属性 | 描述description |
|---|---|
| audioTracks | 返回可用的音轨列表（MultipleTrackList对象） |
| autoplay | 媒体加载后自动播放 |
| buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
| controller | 返回当前的媒体控制器（MediaController对象） |
| controls | 显示播控控件 |
| crossOrigin | CORS设置 |
| currentSrc | 返回当前媒体的URL |
| currentTime | 当前播放的时间，单位秒 |
| defaultMuted | 缺省是否静音 |
| defaultPlaybackRate | 播控的缺省倍速 |
| duration | 返回媒体的播放总时长，单位秒 |
| ended | 返回当前播放是否结束标志 |
| error | 返回当前播放的错误状态 |
| initialTime | 返回初始播放的位置 |
| loop | 是否循环播放 |
| mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
| muted | 是否静音 |
| networkState | 返回当前网络状态 |
| paused | 是否暂停 |
| playbackRate | 播放的倍速 |
| played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
| preload | 页面加载时是否同时加载音视频 |
| readyState | 返回当前的准备状态 |
| seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
| seeking | 返回用户是否做了跳转操作 |
| src | 当前音视频源的URL |
| startOffsetTime | 返回当前的时间偏移(Date对象) |
| textTracks | 返回可用的文本轨迹(TextTrackList对象) |
| videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
| volume | 音量值 |
Event
| 事件event | 描述description |
|---|---|
| abort | 当音视频加载被异常终止时产生该事件 |
| canplay | 当浏览器可以开始播放该音视频时产生该事件 |
| canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
| durationchange | 当媒体的总时长改变时产生该事件 |
| emptied | 当前播放列表为空时产生该事件 |
| ended | 当前播放列表结束时产生该事件 |
| error | 当加载媒体发生错误时产生该事件 |
| loadeddata | 当加载媒体数据时产生该事件 |
| loadedmetadata | 当收到总时长，分辨率和字轨等metadata时产生该事件 |
| loadstart | 当开始查找媒体数据时产生该事件 |
| pause | 当媒体暂停时产生该事件 |
| play | 当媒体播放时产生该事件 |
| playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
| progress | 当获取到媒体数据时产生该事件 |
| ratechange | 当播放倍数改变时产生该事件 |
| seeked | 当用户完成跳转时产生该事件 |
| seeking | 当用户正执行跳转时操作的时候产生该事件 |
| stalled | 当试图获取媒体数据，但数据还不可用时产生该事件 |
| suspend | 当获取不到数据时产生该事件 |
| timeupdate | 当前播放位置发生改变时产生该事件 |
| volumechange | 当前音量发生改变时产生该事件 |
| waiting | 当视频因缓冲下一帧而停止时产生该事件 |
注意：现在HTML5支持的video格式
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
你也可以自己灵活定义video的控制面板，充分利用CSS3的丰富效果。
一点点难看，呵呵！其中页面代码比较简单，如下
<body style="background-color:#8EEE5EE;"> <section id="skin"> <video id="myMovie" width="640" height="360"> <source src="videos/Introduction.mp4"> </video> <nav> <div id="buttons"> <button type="button" id="playButton">Play</button> </div> <div id="defaultBar"> <div id="progressBar"></div> </div> <div style="clear:both"></div> </nav> </section> </body>
用css控制界面效果
body{ text-align:center; } header,section,footer,aside,nav,article,hgroup{ display:block; } #skin{ width:700px; margin:10px auto; padding:5px; background:red; border:4px solid black; border-radius:20px; } nav{ margin:5px 0px; } #buttons{ float:left; width:70px; height:22px; } #defaultBar{ position:relative; float:left; width:600px; height:14px; padding:4px; border:1px solid black; background:yellow; } /*progressBar在defaultBar内部*/ #progressBar{ position:absolute; width:0px; /*使用javascript控制变化*/ height:14px; /*和defaultBar高度相同*/ background:blue; }
CSS定的control Panel如上图所示。
接下来就是最主要的javascript代码部分，由四个function构成：
这里用到了HTML5的video的新属性，如.duration,.paused,.ended
function doFisrt() { barSize=600; //注意不要使用px单位，且不要用var，是全局变量 myMovie=document.getElementById('myMovie'); playButton=document.getElementById('playButton'); bar=document.getElementById('defaultBar'); progressBar=document.getElementById('progressBar'); playButton.addEventListener('click',playOrPause,false); //第三个参数总是false, Register the event handler for the bubbling phase. bar.addEventListener('click',clickedBar,false); } //控制movie播放和停止 function playOrPause(){ if(!myMovie.paused && !myMovie.ended){ myMovie.pause(); playButton.innerHTML='Play'; window.clearInterval(updatedBar); }else{ myMovie.play(); playButton.innerHTML='pause'; updatedBar=setInterval(update,500); } } //控制进度条的动态显示 function update(){ if(!myMovie.ended){ var size=parseInt(myMovie.currentTime*barSize/myMovie.duration); progressBar.style.width=size+'px'; }else{ progressBar.style.width='0px'; playButton.innerHTML='Play'; window.clearInterval(updatedBar); } } //鼠标点击进度条控制方法 function clickedBar(e){ if(!myMovie.paused && !myMovie.ended){ var mouseX=e.pageX-bar.offsetLeft; var newtime=mouseX*myMovie.duration/barSize; //new starting time myMovie.currentTime=newtime; progressBar.style.width=mouseX+'px'; window.clearInterval(updatedBar); } } window.addEventListener('load',doFisrt,false);