一、视频标签基本API

1. play(开始)

  当我们想在网页中想让视频播放的时候，需要通过一个button按钮来实现，，通过按钮的点击事件，然后让视频开始播放

startNode.onclick=function(){
needVideo.play();
}

2.muted(静音)

  当我们想打开网页的时候让视频自动播放，需要设置视频为静音状态。此时打开网页，视频会自动播放。

<video   muted></video>

3. pause(暂停)

  当我们想在网页中想让视频暂停的时候，也需要通过一个button按钮来实现，，通过按钮的点击事件，然后让视频开始播放。

pauseNode.onclick=function(){
needVideo.pause();
}

4. volume(声音控制)

  在网页中，声音控制需要通过volume来控制，volume的取值范围为0~1。

volumeNode.onclick=function(){needVideo.volume=this.value;
}

5. webkitRequestFullScreen(全屏)

  在网页中，全屏效果通过webkitRequestFullScreen来实现，同时这个也需要通过一个button按钮。

webkitNode.onclick=function(){needVideo.webkitRequestFullScreen();
}

  webkitRequestFullScreen也可以用来全屏图片和div盒子，但是很少用来将div盒子全屏。

二、视频标签进度条API

1. 总时间API（duration）

  当我们需要查看总时间的时候，只需要console.log当前视频的duration即可。也可以是在网页中放入一个盒子，通过innerHtml的形式来查看。

setTimeout(function(){console.log(needVideo.duration);
},50);

2.当前时间API（currentTime）

  当我们需要实时查看当前视频时间的时候，我们可以通过currentTime来查看。
方法1：我们可以通过定时器来查看，但是这种方法占用资源太多，但是非常简单。

setInterval(function(){console.log(needVideo.currentTime);
},50);

方法2：通过事件监听的方式

needVideo.addEventListener('timeupdate',funtion(){nowTime.innerText=needVideo.duration;   //nowTime是一个span;
});

二、进度条拉动效果

  进度条拉动效果是视频播放过程中常用的一个效果，当视频播放的时候，进度条会随着视频的播放而移动，同时我们拉动进度条的时候，视频进度也会跟着变动。

    var go = document.getElementById('go');needVideo.addEventListener('timeupdate', function () {nowTime.innerText = needVideo.currentTime;go.value = needVideo.currentTime / needVideo.duration * 100;}, 50);go.onmousedown = function () {needVideo.pause();}go.onmouseup = function () {needVideo.play();}go.oninput = function () {//总时间*百分比=当前时间needVideo.currentTime = needVideo.duration * (this.value / 100);}//全屏fullScreenNode.onclick = function () {if (needVideo.webkitRequestFullScreen) {//谷歌全屏needVideo.webkitRequestFullScreen();} else if (needVideo.mozRequestFullScreen) {//火狐全屏needVideo.mozRequestFullScreen();} else if (needVideo.msRequestFullScreen) {//IE全屏needVideo.msRequestFullScreen();} else if (needVideo.requestFullScreen) {//特殊格式needVideo.requestFullScreen();}}