JavaScript学习小例子-video使用

本篇是对JavaScript学习过程中一个video具体实现的小例子的记录。
主要是对video播放，暂停，静音，全屏以及音量调节，进度条显示等功能。

下面是效果截图

- HTML部分
主要就是一个视频播放和几个按钮。

<div id="container">
    <video id="video" width="600px" height="480px" controls style="clear:both;display:block;margin:auto">
        <source src="../src/Don't_Let_Me_Down.mp4" type="video/mp4">
    </video>
    <div id="buttons">
        <input type="button" value="播放" id="playButton" onclick="play()"/>
        <input type="button" value="暂停" id="pauseButton" onclick="pause()"/>
        <input type="button" value="静音" id="mute" onclick="mute()"/>
        <input type="button" value="全屏" id="all" onclick="all()"/>
        <span>播放进度</span>
        <progress value="0" id="progress">
        </progress>
        <span >音量</span>
        <input type="range" id="ran" value="50" min="0" max="100" onchange="setVolume()"/>
    </div>
</div>

• CSS部分
  主要是居中显示

 <style type="text/css">
        #container{
            width:800px;
            height:530px;
            margin: 0 auto;
            border:1px solid #000;
        }
        #buttons{
            width:800px;
            height:50px;
            margin:auto;
            border:1px solid red;
            text-align:center;
        }
    </style>

• JavaScript部分

方法/属性	含义
play()	播放
pause()	暂停
muted	是否静音
webkitRequestFullScreen()	兼容谷歌和safari的全屏显示
mozRequestFullScreen()	兼容火狐的全屏显示

<script type="text/javascript">
    var video=document.getElementById("video");

    var playButton=document.getElementById("playButton");
    var pauseButton=document.getElementById("pauseButton");
    var progress=document.getElementById("progress");
    var ran=document.getElementById("ran");
    var all=document.getElementById("all");

    all.onclick=function () {
        //兼容谷歌和safari
        video.webkitRequestFullScreen();
        //兼容火狐
        video.mozRequestFullScreen();
    }

    //播放
    function play() {
        //播放视频
        video.play();
        //禁用播放按钮
        playButton.disabled=true;
        //同时是暂停按钮可用
        pauseButton.disabled=false;
        timer=setInterval("pro()", 100);
    }

    function pro() {
        //刷新进度条
        progress.max=video.duration;
        progress.value=video.currentTime;
    }

    //暂停
    function pause() {
        //暂停视频
        video.pause();
        //使播放按钮可用
        playButton.disabled=false;
        //禁用暂停按钮
        pauseButton.disabled=true;
        clearInterval(timer);
    }

    //用于存储视频音量
    var vol;
    function mute() {
        if(video.muted==false){
            vol=ran.value;
            ran.value=0;
            video.muted=true;
        }
        else{
            //如果开始解释静音状态，直接恢复range值
            video.muted=false;
            ran.value=vol;
        }
    }
    //设置音量
    function setVolume() {
        video.volume=ran.value/100;
    }
</script>

值得一提的是<progress>标签的使用以及<input type="range" value="50" min="0" max="100" onchange="setVolume()"/>使用，都是第一次接触。
1. progress
利用计时器刷新progress.max和progress.value，实现进度条的效果

1. input–range
   设置最小值，最大值，以及实际值，然后就是值改变时的时间onchange

所有代码