標(biāo)簽
-
audiovideo source
視頻容器
- 容器文件啰扛，類似于壓縮了一組文件
--音頻軌道
--視頻軌道
--元數(shù)據(jù)：封面，標(biāo)題鞍帝，字幕等
--格式：.avi煞茫、.flv、.mp4宵膨、.mkv辟躏、.ogv等
媒體元素
-
controls顯示或隱藏用戶控制界面
默認(rèn)情況下這些控件是不顯示的会涎，所以需要設(shè)置controls來顯示控件：
<audio controls src="a.mp4"></audio> -
autoplay媒體是否自動(dòng)播放 -
loop媒體是否循環(huán)播放 -
currentTime從開始到播放現(xiàn)在所用的時(shí)間 -
duration媒體總時(shí)間（只讀） -
volume0.0~1.0的音量相對(duì)值 -
muted是否靜音 -
autobuffer開始的時(shí)候是否緩沖加載末秃，autoplay的時(shí)候练慕，忽略此屬性
音頻和視頻
編解碼器（瀏覽器中內(nèi)嵌了一個(gè)叫做編解碼器的東西）
- 原始的視頻容器非常大铃将，添加需編碼劲阎，播放需解碼
- 音頻編解碼器：
AAC鸠真、MPEG-3吠卷、OggVorbis - 視頻編解碼器：
H.264、VP8偎捎、OggTheora
source的作用與用法：
<video controls>
<source src="aaa.ogv"></source>
<source src="aaa.mp4"></source>
</video>
上述代碼中，先加載aaa.ogv格式的文件程奠，如果瀏覽器不支持ogv格式瞄沙，就加載后面的aaa.mp4，以此類推申尼，所以source的作用不言而喻了吧师幕。
currentTime
播放過程中可以實(shí)時(shí)獲取當(dāng)前播放了多長(zhǎng)時(shí)間
<audio :src="w" id="a1" controls autoplay></audio>
var oA = document.getElementById("a1")
setInterval(function () {
console.log(oA.currentTime)
}, 1000)
可以看到霹粥，瀏覽器也并不是隔整一秒執(zhí)行的......
currentTime不僅可以讀取后控，還可以設(shè)置（可讀寫）
eg：設(shè)置媒體元素從60秒處開始播放：
oA.currentTime = 60
duration
var oA = document.getElementById("a1")
console.log(oA.duration)
直接這么獲取到audio元素然后打印其duration浩淘，結(jié)果很可能是NaN吴攒，可以理解為沒來得及獲取媒體元素加載的時(shí)長(zhǎng)，如果這里給設(shè)置一個(gè)延遲再打印欣鳖，是可以獲取到duration的泽台。
當(dāng)歌曲準(zhǔn)備到可以被播放時(shí)矾缓，才進(jìn)行獲取duration和buffered等相關(guān)數(shù)據(jù)獲取操作嗜闻。
媒體元素_2
-
paused媒體是否暫停（只讀） -
ended媒體是否播放完畢（只讀） -
error媒體發(fā)生錯(cuò)誤的時(shí)候，返回的錯(cuò)誤代碼（只讀） -
currentSrc以字符串的形式返回媒體地址（只讀） -
play()媒體播放 -
pause()媒體暫停 -
load()重新加載媒體
load()
比如在js中改變了媒體元素的src样眠，這時(shí)是需要重新加載媒體元素：
<video controls>
<source src="aaa.ogv"></source>
</video>
......
as[0].src = "aaa.mp4"
oV.load()
媒體元素_3
事件：loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange
<video controls id="ov">
<source :src="w"></source>
</video>
var oV = document.getElementById("ov")
oV.addEventListener("ended", function () {
console.log("播放結(jié)束")
}, false)
文件播放結(jié)束時(shí)檐束，控制臺(tái)打印“播放結(jié)束”被丧。
video額外特性
-
poster：視頻播放前的預(yù)覽圖片
//某vue文件------------------------------------------------------
<video controls id="ov">
<source :src="w"></source>
</video>
......
import pic from "@/assets/logo.png"
data(){
return {
pic
}
}
......
mounted(){
var oV = document.getElementById("ov")
oV.poster = pic
}
這里我是在vue+webpack項(xiàng)目中進(jìn)行的實(shí)踐，在webpack中一切都是模塊柿究，所以在要正確加載出圖片文件蝇摸，html中是將圖片解碼成了base64探入，因此這里使用模塊的思想把圖片引入然后賦值給video的poster蜂嗽。
在常規(guī)html中引入方式一般為：oV.poster="../assets/logo.png"
-
widthheight：設(shè)置視頻的尺寸
<video controls id="ov" poster="../assets/logo.png">
<source :src="w"></source>
</video>
var oV = document.getElementById("ov")
oV.width = 800
oV.height = 700
-
videoWidthvideoHeight：視頻的實(shí)際尺寸（只讀）
視頻最原始的大小植旧，不論被設(shè)置成多大尺寸，這個(gè)原始大小是不會(huì)變的
練習(xí)1：帶聲音的導(dǎo)航（部分代碼）
<ul id="ul1">
<li au="a">1</li>
<li au="b">2</li>
<li au="c">3</li>
<li au="d">4</li>
<li au="e">5</li>
<li au="f">6</li>
<li au="g">7</li>
</ul>
<audio src="" id="a1"></audio>
var oUl = document.getElementById("ul1")
var aLi = oUl.getElementsByTagName("li")
var oA = document.getElementById("a1")
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
console.log(this.getAttribute("au"))
oA.src = "http://yinjie/yuefu/"+this.getAttribute("au")+".mp3";
oA.play()
}
}
練習(xí)2：把視頻以canvas方式輸出（部分代碼）
<video controls id="v1">
<source :src="aaa"></source>
</video>
<canvas id="c1"></canvas>
var oV = document.getElementById("v1")
var oC = document.getElementById("c1")
var oGc = oC.getContext("2d")
//canplay
//在媒體數(shù)據(jù)已經(jīng)有足夠的數(shù)據(jù)（至少播放數(shù)幀）可供播放時(shí)觸發(fā)
//否則直接是獲取不到videoWidth這種數(shù)據(jù)的
oV.addEventListener("canplay", function () {
oC.width = oV.videoWidth
oC.height = oV.videoHeight
console.log(oV.videoWidth, oV.videoHeight)
}, false)
setInterval(function () {
oGc.drawImage(oV, 0, 0)
//另外還可以進(jìn)行其他像素級(jí)操作
}, 30)
練習(xí)3：自制播放器（部分代碼）
功能：播放/暫停、播放時(shí)間實(shí)時(shí)顯示嵌戈、全屏熟呛、靜音（每個(gè)功能基本上都是相對(duì)獨(dú)立的，沒有做互相影響的處理）
<video controls id="v1">
<source :src="aaa"></source>
</video>
<input type="button" value="播放"/>
<input type="text" value="00:00:00" readonly/> <!--實(shí)時(shí)播放時(shí)間顯示-->
<input type="text" value="00:00:00" readonly/> <!--播放總時(shí)長(zhǎng)-->
<input type="button" value="靜音"/>
<input type="button" value="全屏"/>
var oV = document.getElementById("v1")
var oInput = document.getElementsByTagName("input")
var timer = null //計(jì)時(shí)器
var oDuration = null //媒體總時(shí)長(zhǎng)
oV.addEventListener("canplay", function () {
oV.width = 250 //視頻原始大小太大吗冤，設(shè)置寬高
oV.height = 500
oDuration = oV.duration
oInput[2].value = changeTime(oDuration) //設(shè)置總播放時(shí)長(zhǎng)
//設(shè)置總播放時(shí)長(zhǎng)要放在canplay里面椎瘟，放在外面獲取到的oDuration可能是空
}, false)
oInput[0].onclick = function () { //第一個(gè)按鈕控制播放和暫停
if(oV.paused){
oV.play()
this.value = "暫停"
nowTime()
timer = setInterval(nowTime, 1000)
}
else {
oV.pause()
this.value = "播放"
clearInterval(timer)
}
}
function changeTime(iNum){ //總播放時(shí)長(zhǎng)轉(zhuǎn)換為時(shí)分秒
iNum = parseInt(iNum)
var iH = toZero(Math.floor(iNum/3600)); //時(shí)
var iM = toZero(Math.floor(iNum%3600/60));
var iS = toZero(Math.floor(iNum%60));
return iH+":"+iM+":"+iS;
}
function toZero(num) { // 9--09降传，12--12
if(num<=9){
return "0"+num
}
return ""+num;
}
function nowTime(){
oInput[1].value = changeTime(oV.currentTime)
}
oInput[3].onclick = function () {
if(oV.muted){
oV.volume = 1
this.value = "靜音"
oV.muted = false //這句話一定要加
}
else {
oV.volume = 0
this.value = "取消靜音"
oV.muted = true //這句話一定要加
//volume音量并不會(huì)影響muted值婆排，所以需要手動(dòng)設(shè)置
}
}
oInput[4].onclick = function () {
oV.webkitRequestFullScreen()
}
其中關(guān)于h5控制全屏播放段只，可參考如下博客：
張?chǎng)涡瘢篐TML5全屏API在FireFox/Chrome中的顯示差異
武方博：html5實(shí)現(xiàn)全屏的api方法
練習(xí)4：自制播放器（部分代碼）
功能：視頻進(jìn)度拖拽控制（只是做了通過拖拽控制視頻進(jìn)度鉴扫，其他的相互影響的代碼暫時(shí)未寫）
<video controls id="v1">
<source :src="aaa"></source>
</video>
<div id="div1">
<div id="div2"></div>
</div>
var oV = document.getElementById("v1")
var oDiv1 = document.getElementById("div1")
var oDiv2 = document.getElementById("div2")
var oDuration = null //媒體總時(shí)長(zhǎng)
var disX = 0 //視頻進(jìn)度
oV.addEventListener("canplay", function () {
oV.width = 250
oV.height = 500
oDuration = oV.duration
}, false)
oDiv1.onmousedown = function (ev) {
var ev = ev || window.event
disX = ev.clientX - oDiv1.offsetLeft
oDiv2.style.width = disX + "px"
document.onmousemove = function (ev) {
var ev = ev || window.event
var L = ev.clientX - oDiv1.offsetLeft
if(L<0){
L = 0
}
else if(L > oDiv1.offsetWidth){
L = oDiv1.offsetWidth
}
oDiv2.style.width = L + "px"
var scale = L / oDiv1.offsetWidth
oV.currentTime = oDuration * scale.toFixed(2)
}
document.onmouseup = function () {
document.onmousemove = null
}
return false
}
