播放暫停鍵的控制

播放和暫停是一個div的不一樣的class

通過點擊然后改變class名來顯示暫停還是播放。
有兩種方式改變class名
HTML

<!--video元素 -->
<video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
<!-- 控制播放暫停的按鈕 -->
<div class='playNode'></div>

css

//播放按鈕
.playNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/playNode.png) no-repeat;cursor: pointer;
}
//暫停按鈕
.pauseNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/pause.png) no-repeat;cursor: pointer;
}

播放按鈕playNode.png

暫停按鈕pause.png

方法一：

js

var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0];
PlayNode.onclick = function(){
  //可以使用classList.toggle方法來切換
  this.classList.toggle('pauseNode');
}

方法二：

利用傳統(tǒng)模式進行修改
js

var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0],
        PlayBln = true;
PlayNode.onclick = function(){
  PlayBln = !PlayBln;
        if(PlayBln == false){
            this.className = 'pauseNode';
            VideoNode.play();
                        
        }
        else{
            this.className = 'playNode';
            VideoNode.pause();
        }
}

全屏事件

針對不同的瀏覽器

HTML

<!-- 全屏的按鈕 -->
<div class='fullNode'></div>

js

var VideoNode = document.getElementsByClassName('videoNode')[0],
    FullNode = document.querySelector('.fullNode');
    //獲取HTML中第一個class為fullNode的元素
FullNode.onclick = function(){
        if(VideoNode.webkitRequestFullscreen){
            VideoNode.webkitRequestFullscreen();
        }
        else if(VideoNode.mozRequestFullScreen){
            VideoNode.mozRequestFullScreen();
        }
        else{
            VideoNode.requestFullscreen();
        }
    };

播放時間事件

進度條的時間的變化，起始時間與總時間

HTML

<!-- video元素 -->
    <video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
    <!-- 控制器的元素 -->
    <div class='controlsNode'>
<!-- video的進度條 -->
      <div class='loadNode'>
            <div class='loadLeft'></div>
            <div class='loadRight'></div>
            <!-- 拖動進度條的按鈕 -->
            <div class='crlNode'></div>
            <!-- 真正的進度條 -->
            <div class='lineNode'>
                <div class='lineRight'></div>
            </div>
      </div>
     <!-- 時間的元素 -->
      <div class='timeNode'>
            <span class='now'>00:00</span>
            <span> - </span>
            <span class='all'>4:30</span>
      </div>    
    </div>

js

var VideoNode = document.getElementsByClassName('videoNode')[0],
    nowNode = document.querySelector('.now'),
    allNode = document.querySelector('.all'),
    LineNode = document.querySelector('.lineNode'),
    CrlNode = document.querySelector('.crlNode');

//解決了 上來時間的NAN的問題，addEventListener是給HTML元素添加觸發(fā)事件，返回總時間
    VideoNode.addEventListener('canplay',function(){
        //duration 屬性返回當(dāng)前音頻/視頻的長度，以秒計
        var needTime = parseInt(VideoNode.duration);
        var  s = needTime%60;//幾秒
        var  m = parseInt(needTime / 60);//幾分
        var timeNum = toDou(m)+':'+toDou(s);
        allNode.innerHTML = timeNum;
    },false);
//解決 時間不足10 的一個問題，不足10數(shù)前補0
    function toDou(time){
        return time<10?'0'+time:time;
    }
//當(dāng)視頻播放的時候 需要當(dāng)前的時間動起來
    //timeupdate該屬性返回音頻/視頻（audio/video）的播放位置（以秒計）
    VideoNode.addEventListener('timeupdate',function(){
        //看一眼目前的 百分比進度
        //console.log(VideoNode.currentTime/VideoNode.duration*100);
        LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';

        //console.log(LineNode.offsetWidth)
        CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

        var needTime = parseInt(VideoNode.currentTime);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        nowNode.innerHTML = timeNum;
    },false);

進度條拉拽事件

拉拽進度按鈕，視頻進度隨之改變，并且保持暫停或播放。時間也隨之改變

js

    //拖拽進度條按鈕
    CrlNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        VideoNode.pause();

        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = LoadNode.offsetWidth - 8.5;

            needX = needX < -8.5 ? -8.5 : needX;
            needX = needX > maxX ? maxX : needX;
            CrlNode.style.left = needX + 'px';
            LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';


        };
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;

            VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;
            //console.log((CrlNode.offsetLeft+9)/LoadNode.offsetWidth);
            //console.log()
            
            //VideoNode.play();
            //PlayBln = false;
            //className = 'pauseNode';
            if(PlayBln == false){
                //console.log(1);
                PlayNode.className = 'pauseNode';
                VideoNode.play();
            }
            else{
                //console.log(2);
                PlayNode.className = 'playNode';
                VideoNode.pause();
            }
        };
        return false;
    };