本文将运用HTML5供应的VideoAPI做一个自定义的视频播放器，须要用到HTML5供应的video标签、以及HTML5供应的对JavascriptAPI的扩大。
一、基础知识
1.用法
<video src="./video/mv.mp4"></video>注重：audio和video元素必需同时包括最先和完毕标签，不能运用<audio />如许的空元素语法情势。
2.主要HTML属性
controls：ontrol：假如涌现该属性，则向用户显现控件，比方播放按钮。每一个浏览器中的播放控件都不太一样，但用处都一样，都能够掌握最先和完毕，跳到新位置和调治音量
autoplay：autoplay：假如涌现该属性，则视频在停当后立时播放。假如不设置autoplay属性，必需是用户单击播放按钮才会播放音频文件。
loop：loop：(轮回播放)通知浏览器在音频抵达末端时，再从头最先从新播放
preload：auto、mete、none：通知浏览器怎样下载音频
auto：让浏览器下载悉数文件，以便用户单击播放按钮时就能够播放。固然，下载历程是背景举行的，网页访客没必要守候下载完成，而且依然能够随便检察网页。
meta：通知浏览器先猎取音频文件开首的数据块，从而足以肯定一些基本信息（比方音频的总时长）
none：**通知浏览器没必要预先下载。适当地应用这些值，能够节约带宽。
假如没有设置preload属性，浏览器就本身决议是不是预先下载了。对这一点，差别浏览器的处理方式也不一样。多半浏览器将auto作为默认值，但Firefox的默认值是metadata。不过，也请人人注重，这个preload属性也不是必需严格执行的划定规矩，而只是你对浏览器的发起。依据具体情况，浏览器能够疏忽你的设置。（有些旧版本浏览器依据不会在乎preload属性。）
3.经常使用事宜
事宜称号 ： 诠释
oncanplay：当文件停当能够最先播放时运转的剧本（缓冲已充足最先时）。
ontimeupdate： 当播放位置转变时（比方当用户快进到序言中一个差别的位置时）运转的剧本。
onended：当序言已抵达末端时运转的剧本（可发送相似“谢谢寓目”之类的音讯）。
4.经常使用要领
要领称号 ：诠释
play()：最先播放音频/视频
pause()：停息当前播放的音频/视频
5.经常使用API属性
属性称号 ： 诠释
duration：返回当前音频/视频的长度（以秒计）
paused：设置或返回音频/视频是不是停息
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
ended：返回音频/视频的播放是不是已完毕
更多属性、事宜、要领请检察w3school
二、打造本身的播放器
我们运用JavaScript掌握播放控件的行动（自定义播放控件），完成以下功用：
应用HTML+CSS制造一个本身的播放控件条，然后定位到视频最下方
视频加载loading结果
播放、停息
总时长和当前播放时长显现
播放进度条
全屏显现
1.播放控件
<body>
<figure>
<figcaption>视频播放器</figcaption>
<div class="player">
<video src="./video/mv.mp4"></video>
<div class="controls">
<!-- 播放/停息 -->
<a href="javascript:;" class="switch fa fa-play"></a>
<!-- 全屏 -->
<a href="javascript:;" class="expand fa fa-expand"></a>
<!-- 进度条 -->
<div class="progress">
<div class="loaded"></div>
<div class="line"></div>
<div class="bar"></div>
</div>
<!-- 时刻 -->
<div class="timer">
<span class="current">00:00:00</span> /
<span class="total">00:00:00</span>
</div>
<!-- 声响 -->
</div>
</div>
</figure>上面是悉数HTML代码，.controls类就是播放控件HTML，援用CSS代码：
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/player.css">为了显现播放按钮等图标我运用了字体图标
2.视频加载loading结果
一最先先隐蔽视频，用一个背景图片替换，比及视频加载完成能够播放时在显现视频
CSS：
.player {
width: 720px;
height: 360px;
margin: 0 auto;
background: #000 url(../images/loading.gif) center/300px no-repeat;
position: relative;
}
video {
display: none;
height: 100%;
margin: 0 auto;
}3.播放功用
让我们最先写javascript代码吧，起首我们先猎取要用到的DOM元素：
var video = document.querySelector("video");
var isPlay = document.querySelector(".switch");
var expand = document.querySelector(".expand");
var progress = document.querySelector(".progress");
var loaded = document.querySelector(".progress > .loaded");
var currPlayTime = document.querySelector(".timer > .current");
var totalTime = document.querySelector(".timer > .total");当视频能够播放时，显现视频
//当视频可播放的时刻
video.oncanplay = function(){
//显现视频
this.style.display = "block";
//显现视频总时长
totalTime.innerHTML = getFormatTime(this.duration);
};4.播放、停息
点击播放按钮时显现停息图标，在播放和停息状况之间切换图标
//播放按钮掌握
isPlay.onclick = function(){
if(video.paused) {
video.play();
} else {
video.pause();
}
this.classList.toggle("fa-pause");
};5.总时长和当前播放时长显现
前面代码中实在已设置了相干代码，此时我们只须要把猎取到的毫秒数转换成我们须要的时刻花样即可，供应getFormatTime()函数：
function getFormatTime(time) {
var time = time 0;
var h = parseInt(time/3600),
m = parseInt(time%3600/60),
s = parseInt(time%60);
h = h < 10 ? "0"+h : h;
m = m < 10 ? "0"+m : m;
s = s < 10 ? "0"+s : s;
return h+":"+m+":"+s;
}6.播放进度条
//播放进度
video.ontimeupdate = function(){
var currTime = this.currentTime, //当前播放时刻
duration = this.duration; // 视频总时长
//百分比
var pre = currTime / duration * 100 + "%";
//显现进度条
loaded.style.width = pre;
//显现当前播放进度时刻
currPlayTime.innerHTML = getFormatTime(currTime);
};如许就能够够及时显现进度条了，此时，我们还须要点击进度条举行腾跃播放，即我们点击恣意时刻点视频跳转到当前时刻点播放：
//腾跃播放
progress.onclick = function(e){
var event = e window.event;
video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};7.全屏显现
这个功用能够运用HTML5供应的全局API：webkitRequestFullScreen完成，跟video无关：
//全屏
expand.onclick = function(){
video.webkitRequestFullScreen();
};经测试在firefox、IE下全屏功用不可用，如许一般了，全屏API是针对webkit内核的。
