<video id="video" preloader poster="../video/show.png" height="480" width="640"><source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>

var v = document.getElementById('video');var playBtn = document.getElementById('play_btn');playBtn.textContent = '>';playBtn.addEventListener("click", function(){if(v.paused){v.play();playBtn.textContent = '||';}else{v.pause();playBtn.textContent = '>';}
});

<video id="video" preloader poster="../video/show.png" height="480" width="640"><source src="../video/trailer.MP4" type="video/mp4">
</video>
<div>音量<button id="vol_inc_btn" type="button">+</button><button id="vol_dec_btn" type="button">-</button>
</div>

var v = document.getElementById('video');var volIncBtn = document.getElementById('vol_inc_btn');
var volDecBtn = document.getElementById('vol_dec_btn');volIncBtn.addEventListener("click", function(){v.volume > 0.9?v.volume = 1:v.volume += 0.1;
})volDecBtn.addEventListener("click", function(){v.volume < 0.1?v.volume = 0:v.volume -= 0.1;
})

<button id="muted_btn" type="button">静音</button>

var mutedBtn = document.getElementById('muted_btn');mutedBtn.addEventListener("click", function(){v.muted = !v.muted;mutedBtn.textContent = v.muted?'恢复':'静音';})

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font>

var nowTime = document.getElementById('now_time');
var duration = document.getElementById('duration');//初始值设为0
nowTime.textContent = 0;
duration.textContent = 0;//currentTime 和 duration 单位都是秒，我们写一个函数来将时间显示格式变为 mm:ss。
function parseTime(time){time = Math.floor(time);var _m, _s;_m = Math.floor(time/60);_s = time - _m*60;if(_m<10){_m = '0' + _m;}if(_s<10){_s = '0' + _s;}return _m + ':' + _s
}v.addEventListener('timeupdate', function(){nowTime.textContent = parseTime(v.currentTime);
})v.addEventListener('loadedmetadata', function(){console.log('loadedmetadata')duration.textContent = parseTime(v.duration);
})

<div id="progressWrap"><div id="playProgress"></div>
</div>

var progressWrap = document.getElementById("progressWrap");
var playProgress = document.getElementById("playProgress");//计算当前进度条显示长度，利用前面说过的 currentTime 和 duration。
function getProgress(){var percent = v.currentTime / v.duration;playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
}// 鼠标在播放条上点击时进行捕获并进行处理
function videoSeek(e){if(v.paused || v.ended){v.play();}enhanceVideoSeek(e);
}
function enhanceVideoSeek(e){var length = e.pageX - progressWrap.offsetLeft;var percent = length / progressWrap.offsetWidth;playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";v.currentTime = percent * v.duration;
}progressWrap.addEventListener('click', function(e){videoSeek(e);
})v.addEventListener('timeupdate', function(){getProgress();
})

<button id="speed_up" type="button">快进</button>

var speedUpBtn = document.getElementById('speed_up');var _speed = 1;speedUpBtn.addEventListener('click', function(){changeSpeed();
});function changeSpeed () {_speed = _speed * 2;if(_speed>4){_speed = 1;}v.playbackRate = _speed;speedUpBtn.textContent = _speed===1?'快进':'快进x' + _speed;
}

<button id="back" type="button">快退</button>

var backBtn = document.getElementById('back');
var _back_speed = 1;
var _t;backBtn.addEventListener('click', function(){_back_speed = _back_speed * 2;if(_back_speed>4){v.playbackRate = 1;_back_speed = 1;clearInterval(_t);}else{v.playbackRate = 0;clearInterval(_t);//通过计时器来不断改变当前播放位置，实现后退的功能_t = setInterval(function(){v.currentTime -= _back_speed * 0.1;},100)}backBtn.textContent = _back_speed===1?'快退':'快退x' + _back_speed;
})

<p id="load_state"></p>

var loadState = document.getElementById('load_state');v.addEventListener('loadstart', function(){loadState.textContent = '视频加载中。。。';
})v.addEventListener('loadeddata', function(){loadState.textContent = '加载完毕。';
})v.addEventListener('error', function(){loadState.textContent = '加载失败。';
})

<button id="fullscreen" type="button">全屏</button>

function requestFullScreen(de) {if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();}
}var fullscreen = document.getElementById('fullscreen');fullscreen.addEventListener('click', function(){requestFullScreen(v);
})