第8章 多媒体

早期HTML4版本之前，多媒体文件在网页中属于“二等公民”，播放多媒体需要借助第三方的播放插件，比如windows media player，flash等等。

<object>
    <embed src="source/1.mp3"></embed>
</object>

在HTML5版本发布之后，提供两个关于多媒体播放的标记

• <audio> 播放音频
• <video> 播放视频

1. 多媒体标记中的属性

src属性可以使用<source>的标记，进行资源备选的设置

<video controls poster="source/begin.png">
    <source src="source/WLK.webm" ></source>
    <source src="source/WLK.ogv" ></source>
    对不起，您的浏览器不支持播放视频
</video>

2. 多媒体操作的API

<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>