早期HTML4版本之前，多媒體文件在網(wǎng)頁中屬于“二等公民”，播放多媒體需要借助第三方的播放插件恐仑，比如windows media player灰署，flash等等伶椿。
<object>
<embed src="source/1.mp3"></embed>
</object>
在HTML5版本發(fā)布之后，提供兩個(gè)關(guān)于多媒體播放的標(biāo)記
- <audio> 播放音頻
- <video> 播放視頻
1. 多媒體標(biāo)記中的屬性
| 屬性 | 作用 |
|---|---|
| autoplay | 設(shè)置多媒體進(jìn)入網(wǎng)頁后自動(dòng)播放 |
| src | 多媒體的資源位置 |
| controls | 多媒體的控制臺(tái) |
| poster | 視頻的封面 |
src屬性可以使用<source>的標(biāo)記氓侧，進(jìn)行資源備選的設(shè)置
<video controls poster="source/begin.png">
<source src="source/WLK.webm" ></source>
<source src="source/WLK.ogv" ></source>
對(duì)不起脊另，您的瀏覽器不支持播放視頻
</video>
2. 多媒體操作的API
| API | 作用 |
|---|---|
| play() | 播放多媒體 |
| pause() | 暫停多媒體 |
| currentTime | 當(dāng)前播放進(jìn)度 |
| duration | 多媒體總長(zhǎng) |
| volume | 音量，取值0-1 |
| muted | 是否為靜音 |
| ontimeupdate | 播放時(shí)間约巷，當(dāng)視頻正在播放時(shí)觸發(fā) |
<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>
對(duì)不起偎痛，您的瀏覽器不支持播放我們的激情小電影
</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="快進(jìn)" 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; //當(dāng)前播放節(jié)點(diǎn) = 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 = "當(dāng)前播放節(jié)點(diǎn)："+ v.currentTime+"<br>";
html += "視頻總長(zhǎng):"+ 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>
