早期HTML4版本之前，多媒体文件在网页中属于“二等公民”，播放多媒体需要借助第三方的播放插件，比如windows media player，flash等等。
<object>
<embed src="source/1.mp3"></embed>
</object>
在HTML5版本发布之后，提供两个关于多媒体播放的标记
- <audio> 播放音频
- <video> 播放视频
1. 多媒体标记中的属性
| 属性 | 作用 |
|---|---|
| autoplay | 设置多媒体进入网页后自动播放 |
| src | 多媒体的资源位置 |
| controls | 多媒体的控制台 |
| poster | 视频的封面 |
src属性可以使用<source>的标记，进行资源备选的设置
<video controls poster="source/begin.png">
<source src="source/WLK.webm" ></source>
<source src="source/WLK.ogv" ></source>
对不起，您的浏览器不支持播放视频
</video>
2. 多媒体操作的API
| API | 作用 |
|---|---|
| play() | 播放多媒体 |
| pause() | 暂停多媒体 |
| currentTime | 当前播放进度 |
| duration | 多媒体总长 |
| volume | 音量，取值0-1 |
| muted | 是否为静音 |
| ontimeupdate | 播放时间，当视频正在播放时触发 |
<video id="v1" width="1200" height="600" controls poster="source/begin.png" ontimeupdate="vtup()">
<source src="source/WLK.webm" ></source>
<source src="source/WLK.ogv" ></source>
对不起，您的浏览器不支持播放我们的激情小电影
</video>
<div id="div1">
<marquee id="mar1" scrollamount="10">哈哈</marquee>
</div>
<span id="sp1"></span>
<br>
<input type="button" value="播放" onclick="vplay()" />
<input type="button" value="暂停" onclick="vpause()" />
<input type="button" value="停止" onclick="vstop()" />
<input type="button" value="快进" onclick="vplayadd(5)" />
<input type="button" value="快退" onclick="vplayadd(-5)" />
<input type="button" value="音量+" onclick="vvolume(1)" />
<input type="button" value="音量-" onclick="vvolume(-1)" />
<input type="button" value="静音" onclick="vmute()" />
<script type="text/javascript">
var a = new Array();
a.push(1);
a.push(5);
a.push(10);
var b = new Array();
b.push("这货真冷");
b.push("哈哈哈");
b.push("嘿嘿嘿");
function vplay(){
var v = document.getElementById("v1");
v.play();
}
function vpause(){
var v = document.getElementById("v1");
v.pause();
}
function vstop(){
var v = document.getElementById("v1");
v.currentTime = 0; //当前播放节点 = 0
v.pause();
}
function vplayadd(n){
var v = document.getElementById("v1");
v.currentTime += n;
}
function vvolume(n){
var v = document.getElementById("v1");
v.volume += n/5;
}
function vmute(){
var v = document.getElementById("v1");
v.muted = true;
}
function vtup(){
var v = document.getElementById("v1");
var html = "当前播放节点："+ v.currentTime+"<br>";
html += "视频总长:"+ v.duration + "<br>";
html += "播放百分比:"+ Math.floor(v.currentTime/v.duration*100)+"%"
document.getElementById("sp1").innerHTML = html;
var t = Math.floor(v.currentTime);
var idx = -1;
for(var i = 0; i < a.length; i++){
if(a[i] == t){
idx = i;
break;
}
}
if(idx != -1){
document.getElementById("mar1").innerText = b[idx];
}
}
</script>
