此文主要适读人群：梦想成为前端工程师的你！
（承接上文）
三、音频、视频标签
1、video
web上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
用法：
<video src='movie.ogg' controls autoplay></video>
src中引入我们的视频，注意视频的格式，要符合我们之前所述的标准；当然，为了防止浏览器对视频格式不兼容，或者其他原因导致.ogg格式视频无法播放，我们可以多增加几种视频格式，写法如下：
controls 代表控制条，是指视频播放时，控制音量大小，暂停播放，上一个下一个之类的那种控制条。如果没有该属性，则无法实现对视频的控制。
autoplay 指的是视屏在网页打开时是否自动播放，有该属性则表示，网页一打开，视频就会自动播放；慎用；
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
这里，我们不再累述那些有的没的属性，我们通过自定义一个播放器的实例，来快速对video标签入门
首先，我们要知道，虽然video标签能够为我们提供控制条，提供一些有用的视频API接口，但是，通常情况下，出于对项目的不同需求，我们都会根据这些属性进行自定义播放器；
好了，接下来，我们进行一个简易自定义播放器的开发：
（1）首先，我们先实现 自定义播放器的播放、暂停、停止功能；
这是html结构
接下来，我们就通过原生js控制video属性实现这三个功能：
自定义播放器
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oV=document.getElementById('v1');
//播放
oBtn1.onclick=function(){
oV.play();
};
//停止
oBtn2.onclick=function(){
oV.pause();
oV.currentTime=0;
};
//暂停
oBtn3.onclick=function(){
oV.pause();
};
};
（2） 接下来，我们为该播放器添加时间进度条
html结构如下：
它的样式如下：
js中添加如下代码：
//检测播放时间是否变了！
oV.ontimeupdate=function(){
var oSpan=document.getElementById('os')
//console.log(oV.currentTime,oV.duration)
var scale=oV.currentTime/oV.duration;
oSpan.style.width=scale*100+'%';
};
（3）添加静音和音量大小控制
这是HTML结构
js代码部分：
//控制声音大小
varoR=document.getElementById('r1');
oR.oninput=function(){
oV.volume=this.value;
};
//静音
varoBtn4=document.getElementById('btn4');
varbOk=true;
oBtn4.onclick=function(){
if(bOk){
oV.muted=true;//静音
oR.value=0;//自定义音量控制条为0
this.value='@';//静音按钮样式变化
this.style.color='#ccc';
}else{
oV.muted=false;//静音关闭
oR.value=oV.volume;//自定义音量控制条退回到静音前状态
this.value='静音';//静音按钮样式变化
this.style.color='#000';
}
bOk=!bOk;
};
现在，我们的简易自定义播放器就算写完了，，虽然这个播放器在功能和外形上还存在很大的不足和改进空间，但是，它为我们进一步自定义播放器提供了一种思路；大家以后可以在实践开发中进一步完善。
另外，除了以上的video 标签，还有一个audio音频标签，主要是实现播放音频的，用法大致同本标签，这里就不在累述；
好了，天色已晚，小编该做梦去了，暂时先分享到这里，后续会接着更新。。
由于本人水平有限，时间仓促，疏漏之处在所难免，望读者包容！
不喜勿喷！
本文为UndefinedCheng原创文章，如想转载，请注明原文网址摘自于http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561，注明出处；
否则，禁止转载；谢谢配合！
