自定义
- 需要加上 controls 控制栏才会显示出来
<video src="VID20161120192409.mp4" controls></video>
- 可以通过js控制video的方法，来进行自定义控制栏。
- 播放与暂停(video上面的方法，play() 和 pause())
属性
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，
以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外，
还可以包含当指定的视频都不能 播放时，返回的内容。
- src属性和poster属性
你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
< video width="200" height="100" src="aaa.mp4" poster=first.png" autoplay="autoplay"></ video >
- preload属性
这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
< video width="200" height="100" src="apple.mp4" poster="not.png" autoplay="autoplay" preload="none"></ video >
None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
Auto：全部预加载。
- autoplay属性
- Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。
< video width="200" height="100" src="apple.mp4" poster="not.png" autoplay="autoplay" preload="none"></ video >
注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，
此时属性要么没有值，要么其值恒等于他的名字
（此处，自动播放为<video autoplay />或者<video autoplay=”autoplay” />）；
而在标签中不使用此属性表示false（此处不进行自动播放为<video />）。
- loop属性
< video width="200" height="100" src="apple.mp4" poster="not.png" autoplay="autoplay" loop="loop"></ video >
- loop属性用于指定视频是否循环播放，同样是一个布尔属性。
- controls属性
< video width="200" height="100" src="apple.mp4" poster="not.png" autoplay="autoplay" preload="none" controls="controls"></ video >
Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video标签不正常，所以这两个只能在网上找截图了。
width属性和height属性
source标签
<video width="200" height="100" controls="controls">
<source src="apple.ogv" />
<source src="apple.ogg" />
</video >
Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。
浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此标签包含src、type、media三个属性。
src属性：用于指定媒体的地址，和video标签的一样。
Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？一样一样一样的。
- 一个完整的例子
<video width="200" height="100" controls="controls">
<source src="apple.ogv" />
<source src="apple.ogg" />
</video >
这段代码在页面中定义了一个视频，此视频的预览图为poster的属性值，显示浏览器的默认媒体控制栏，预加载视频的元数据，循环播放，宽度为200像素，高度为100像素。
第一选择视频地址为第一个source标签的src属性值，视频类别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis，播放媒 介为显示器；第二选择视频地址不再累述。如果你还要兼容IE的话，可以在最后一个source标签后再加上Flash播放器的标签集，或者使用一点 JavaScript代码。
preload 属性规定是否在页面加载后载入视频。
如果设置了 autoplay 属性，则忽略该属性。
半成品
<style>
* {
padding: 0;
margin: 0;
}
.video_player {
position: relative;
width: 1000px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.video_player video {
width: 100%;
height: 100%;
}
.video_player .menu {
position: absolute;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
}
.video_player .menu .play {
position: absolute;
width: 50px;
height: 30px;
border: 1px solid white;
border-radius: 10px;
color: white;
text-align: center;
line-height: 30px;
top: 50%;
left: 30px;
transform: translateY(-50%);
cursor: pointer;
}
.video_player .menu .play:hover {
background-color: rgb(219, 74, 74);
}
.time {
position: absolute;
width: 100px;
height: 30px;
color: white;
text-align: center;
line-height: 30px;
top: 50%;
left: 100px;
transform: translateY(-50%);
}
/* 进度条 */
.progress_bar {
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 6px;
background-color: #ccc;
transition: height .2s linear, top .2s linear;
}
.progress_bar>div {
width: 0px;
height: 100%;
background-color: rgb(250, 139, 12);
}
.progress_bar>i {
position: absolute;
top: -2px;
left: 0px;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: red;
border-radius: 20px;
transition: height .2s linear, top .2s linear, width .2s linear;
}
/* 倍数 */
li {
list-style: none;
}
.speed {
position: absolute;
top: 50%;
right: 150px;
transform: translateY(-50%);
color: white;
text-align: center;
line-height: 30px;
}
.speed div {
width: 50px;
height: 30px;
border: 1px solid white;
border-radius: 10px;
cursor: pointer;
}
.speed ul {
position: absolute;
top: -170px;
left: -4px;
padding-bottom: 25px;
display: none;
}
.speed ul li {
padding: 0 10px;
background-color: rgba(0, 0, 0, 0.5);
}
.speed ul li:nth-of-type(1) {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.speed ul li:nth-last-of-type(1) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.speed ul li:hover {
background-color: rgb(219, 74, 74);
}
.speed div:hover {
background-color: rgb(219, 74, 74);
}
/* 音量 */
.volume {
position: absolute;
top: 50%;
right: 80px;
transform: translateY(-50%);
color: white;
text-align: center;
line-height: 30px;
}
.volume>span {
display: block;
width: 50px;
height: 30px;
border: 1px solid white;
border-radius: 10px;
cursor: pointer;
}
.volume>span:hover {
background-color: rgb(219, 74, 74);
}
.volume .Controller {
position: absolute;
top: -170px;
width: 50px;
height: 150px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.volume .Controller div {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 5px;
height: 100px;
background-color: #ccc;
}
.volume .Controller div::before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 100px;
background-color: rgb(250, 139, 12);
;
}
.volume .Controller div::after {
position: absolute;
content: '';
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 8px;
height: 8px;
background-color: white;
border-radius: 10px;
}
/* 全屏 */
.full {
position: absolute;
width: 50px;
height: 30px;
border: 1px solid white;
border-radius: 10px;
color: white;
text-align: center;
line-height: 30px;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
</style>
<div id='app' class="app">
<div class="video_player">
<video src="VID20161120192409.mp4"></video>
<div class="menu">
<!-- 播放 暂停 -->
<div class="play" @click='play'> {{msg}} </div>
<!-- 时间 -->
<div class="time"> {{time}} </div>
<!-- 进度条 -->
<div class="progress_bar">
<div></div>
<i></i>
</div>
<!-- 倍数 -->
<div class="speed">
<div>倍数</div>
<ul>
<li>0.5x</li>
<li>1.0x</li>
<li>1.5x</li>
<li>1.25x</li>
<li>2.0x</li>
</ul>
</div>
<!-- 音量 -->
<div class="volume">
<span>音量</span>
<div class="Controller">
<div></div>
<i></i>
</div>
</div>
<!-- 全屏 -->
<div class="full">全屏</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 自定义播放，暂停
// 添加时间( duration(视频总时长) 和 currentTime(当前播放到哪里的时间) )
// 添加进度条，与点击跳转。
// (如果发现你不能跳转，那么请看下浏览器的Response Headers 里面，
// 如果你的http协议里面 只有 content-length 和 content-type
// 没有 content-Range: bytes 那么这个时候不允许 点击跳转(不能设置时间跳转))
// 里面有一条计算公式，简单来说就是。当前时间 / 总时长 * 数 可以算出 当前时间，在这个数 里面的 位置。
// 添加倍数(video.palybackRate = 1.0)
var vm = new Vue({
el: '#app',
data() {
return {
msg: '播放',
time: '',
lock:true
}
},
methods: {
play() {
var play = document.getElementsByClassName('play')[0];
var video = document.getElementsByTagName('video')[0];
var bar = document.getElementsByClassName('progress_bar')[0];
var Current = bar.getElementsByTagName('div')[0];
var Dot = bar.getElementsByTagName('i')[0];
var speed = document.getElementsByClassName('speed')[0].getElementsByTagName('div')[0];
var ul = document.getElementsByClassName('speed')[0].getElementsByTagName('ul')[0];
var Controller = document.getElementsByClassName('Controller')[0];
var volume = document.getElementsByClassName('volume')[0].getElementsByTagName('span')[0];
var full = document.getElementsByClassName('full')[0];
var video_player = document.getElementsByClassName('video_player')[0]
if (video.paused) { //判断是否已经播放了，如果还没播放，返回true
video.play(); //触发方法，播放视频
this.msg = "暂停"; //修改 文字。
} else {
video.pause(); //暂停播放。
this.msg = "播放";
}
video.onloadedmetadata = function () { // 视频加载完成触发,然后我们把时间添加到time标签上去。
vm.time = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime %
60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
}
setInterval(function () { //每隔 1秒，刷新一下时间。
vm.time = parseInt(video.currentTime / 60) + ":" + parseInt(video
.currentTime % 60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(
video.duration % 60);
}, 1000)
bar.onmouseover = function () { //鼠标进入的时候，进度条变大
this.style.top = '-10px';
this.style.height = '10px';
Dot.style.width = '18px';
Dot.style.height = '18px';
Dot.style.top = '-5px';
}
bar.onmouseout = function () {
this.style.top = '-6px';
this.style.height = '6px';
Dot.style.width = '10px';
Dot.style.height = '10px';
Dot.style.top = '-2px';
}
bar.onmousedown = function (e) { // 鼠标点击的时候，跳转
Current.style.width = e.layerX + 'px'; //e.layerX 是点击的时候的位置。
Dot.style.left = e.layerX + 'px';
video.currentTime = e.layerX / parseInt(window.getComputedStyle(video, null).width) *
video.duration; //计算出点击的位置在总时间里面占多少。
vm.time = parseInt(video.currentTime / 60) + ":" + parseInt(video.currentTime %
60) + "/" + parseInt(video.duration / 60) + ":" + parseInt(video.duration % 60);
}
// 倍数
speed.onclick = function () {
ul.style.display = 'block';
this.style.backgroundColor = 'rgb(219, 74, 74)';
}
speed.onmouseout = function () {
ul.style.display = 'none';
this.style.backgroundColor = '';
}
ul.onmouseover = function () {
ul.style.display = 'block';
speed.style.backgroundColor = 'rgb(219, 74, 74)';
}
ul.onmouseout = function () {
ul.style.display = 'none';
speed.style.backgroundColor = '';
}
var lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
video.playbackRate = parseFloat(this.innerHTML); //调节倍数 0 到正无穷
speed.innerHTML = this.innerHTML;
}
}
// 音量
volume.onclick = function () {
Controller.style.display = 'block';
this.style.backgroundColor = 'rgb(219, 74, 74)';
}
Controller.getElementsByTagName('div')[0].onmousedown = function (e) {
this.onmousemove = function (e) {
if (100 - e.offsetY > 100) { // 这里为什么要减100 是因为，Y的顶点是0， 但是我们日常是用顶点是100，把数倒了而已。
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: 100px'); // 修改伪元素。 因为我用的是伪元素做音量条
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: 100px');
video.volume = 1; // 修改音量。 0-1 之间， 1是默认音量
} else if (100 - e.offsetY < 0) {
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: 0px');
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: 0px');
video.volume = 0;
} else {
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: ' + (100 - e.offsetY) + 'px');
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: ' + (100 - e.offsetY) + 'px');
video.volume = (100 - e.offsetY) * 0.01;
}
}
this.onmouseout = function () {
Controller.onmousemove = function (e) {
if (150 - e.offsetY - 25 > 100) {
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: 100px');
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: 100px');
video.volume = 1;
} else if (150 - e.offsetY - 25 < 0) {
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: 0px');
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: 0px');
video.volume = 0;
} else {
document.styleSheets[0].addRule('.volume .Controller div::before',
'height: ' + (150 - e.offsetY - 25) + 'px');
document.styleSheets[0].addRule('.volume .Controller div::after',
'bottom: ' + (150 - e.offsetY - 25) + 'px');
video.volume = (150 - e.offsetY - 25) * 0.01;
}
Controller.getElementsByTagName('div')[0].onmouseover = function () {
Controller.onmousemove = false;
Controller.getElementsByTagName('div')[0].onmousemove = false;
}
}
}
document.body.onmouseup = function () {
Controller.onmousemove = false;
Controller.getElementsByTagName('div')[0].onmousemove = false;
Controller.getElementsByTagName('div')[0].onmouseout = false;
Controller.style.display = 'none';
volume.style.backgroundColor = '';
}
}
// 全屏
full.onclick = function () {
if (vm.lock) { //声明一个变量来当状态。
vm.lock = false;
video_player.style.height = window.screen.height + 'px'; //获取屏幕的宽高
video_player.style.width = window.screen.width + 'px';
document.documentElement.requestFullscreen(); //全屏模式
full.innerHTML = '退出';
} else {
vm.lock = true;
video_player.style.height = 500 + 'px';
video_player.style.width = 1000 + 'px';
document.exitFullscreen(); //退出全屏
full.innerHTML = '全屏';
}
}
}
}
})
</script>