此文主要適讀人群：夢(mèng)想成為前端工程師的你！
（承接上文）
三暑竟、音頻斋射、視頻標(biāo)簽
1、video
web上的視頻直到現(xiàn)在但荤，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)罗岖。
今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的纱兑。然而呀闻，并非所有瀏覽器都擁有同樣的插件化借。
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法潜慎。
用法：
<video src='movie.ogg' controls ?autoplay></video>
src中引入我們的視頻，注意視頻的格式蓖康，要符合我們之前所述的標(biāo)準(zhǔn)铐炫；當(dāng)然，為了防止瀏覽器對(duì)視頻格式不兼容蒜焊，或者其他原因?qū)е?ogg格式視頻無法播放倒信，我們可以多增加幾種視頻格式，寫法如下：
controls 代表控制條泳梆，是指視頻播放時(shí)鳖悠，控制音量大小，暫停播放优妙，上一個(gè)下一個(gè)之類的那種控制條乘综。如果沒有該屬性，則無法實(shí)現(xiàn)對(duì)視頻的控制套硼。
autoplay 指的是視屏在網(wǎng)頁打開時(shí)是否自動(dòng)播放卡辰，有該屬性則表示，網(wǎng)頁一打開，視頻就會(huì)自動(dòng)播放九妈；慎用反砌；
當(dāng)前，video 元素支持三種視頻格式：
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
這里萌朱，我們不再累述那些有的沒的屬性宴树，我們通過自定義一個(gè)播放器的實(shí)例，來快速對(duì)video標(biāo)簽入門
首先嚷兔，我們要知道森渐，雖然video標(biāo)簽?zāi)軌驗(yàn)槲覀兲峁┛刂茥l，提供一些有用的視頻API接口冒晰，但是同衣，通常情況下，出于對(duì)項(xiàng)目的不同需求壶运，我們都會(huì)根據(jù)這些屬性進(jìn)行自定義播放器耐齐；
好了，接下來蒋情，我們進(jìn)行一個(gè)簡易自定義播放器的開發(fā)：
（1）首先埠况，我們先實(shí)現(xiàn) 自定義播放器的播放、暫停棵癣、停止功能辕翰；
這是html結(jié)構(gòu)
接下來，我們就通過原生js控制video屬性實(shí)現(xiàn)這三個(gè)功能：
自定義播放器
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） 接下來狈谊，我們?yōu)樵摬シ牌魈砑訒r(shí)間進(jìn)度條
html結(jié)構(gòu)如下：
它的樣式如下：
js中添加如下代碼：
//檢測(cè)播放時(shí)間是否變了喜命！
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結(jié)構(gòu)
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;//靜音關(guān)閉
oR.value=oV.volume;//自定義音量控制條退回到靜音前狀態(tài)
this.value='靜音';//靜音按鈕樣式變化
this.style.color='#000';
}
bOk=!bOk;
};
現(xiàn)在，我們的簡易自定義播放器就算寫完了河劝，壁榕，雖然這個(gè)播放器在功能和外形上還存在很大的不足和改進(jìn)空間，但是赎瞎，它為我們進(jìn)一步自定義播放器提供了一種思路牌里；大家以后可以在實(shí)踐開發(fā)中進(jìn)一步完善。
另外务甥，除了以上的video 標(biāo)簽牡辽，還有一個(gè)audio音頻標(biāo)簽，主要是實(shí)現(xiàn)播放音頻的敞临，用法大致同本標(biāo)簽态辛，這里就不在累述；
好了哟绊，天色已晚因妙，小編該做夢(mèng)去了痰憎，暫時(shí)先分享到這里，后續(xù)會(huì)接著更新攀涵。铣耘。
由于本人水平有限，時(shí)間倉促以故，疏漏之處在所難免蜗细，望讀者包容！
不喜勿噴怒详！
本文為UndefinedCheng原創(chuàng)文章炉媒，如想轉(zhuǎn)載，請(qǐng)注明原文網(wǎng)址摘自于http://www.reibang.com/writer#/notebooks/8901255/notes/8479561昆烁，注明出處吊骤；
否則，禁止轉(zhuǎn)載静尼；謝謝配合白粉！
