.MP4解析工具
mediainfo
mp4box:http://download.tsi.telecom-paristech.fr/gpac/mp4box.js/filereader.html
對于Mp4來說,都是一個(gè)個(gè)box來去組織元素。比如豎著的box,就是一個(gè)個(gè)box,這里就是重點(diǎn)關(guān)注moov。mp4?件由box組成,每個(gè)box分為Header和Data。其中Header部分包含了box的類型和??,Data包含了?box或者數(shù)據(jù),box可以嵌套?box。MP4?件的基本組成單元是box,也就是說MP4?件是由各種各樣的box組成的,有parent box,還有children box。因此,這些boxes之間存在?定的層次關(guān)系,總結(jié)如下表所示,表中標(biāo)記出了各個(gè)box必選或可選特性,√代表Box必選。
下圖是?個(gè)典型mp4?件的基本結(jié)構(gòu):
Hexinator:
Mp4box和mediainfo對比。
這個(gè)trak,就是表示是多少路音頻和視頻。每一個(gè)AVstream都對應(yīng)一個(gè)track。每個(gè)track,可能都有寬高信息,編譯器信息,采樣率,聲道,time_base(time_scale)。
表示track width和heigth使用了4個(gè)字節(jié)。
視頻和音頻的時(shí)間刻度不一樣。
音視頻的handler也不一樣。
比較重要的sample table。
一個(gè)MP4文件分為多個(gè)track,一個(gè)track分為多個(gè)chunk,一個(gè)chunk有多個(gè)sample。mp4數(shù)據(jù)索引和真正的數(shù)據(jù)分開區(qū)域存儲。
先用數(shù)據(jù)索引找到moov,然后才能找到mdat。
下面的解釋就是chunk1-84,都是一一對應(yīng)1個(gè)sample,chunk85,一一對應(yīng)2個(gè)sample,chunk86-88,一一對應(yīng)一個(gè)sample,chunk89,一一對應(yīng)2個(gè)sample,chunk90,一一對應(yīng)一個(gè)sample。
可以根據(jù)sample size去讀取每一幀數(shù)據(jù)的大小。
ftyp
File Type Box,?般在?件的開始位置,描述的?件的版本、兼容協(xié)議等。
moov
Movie Box,包含本?件中所有媒體數(shù)據(jù)的宏觀描述信息以及每路媒體軌道的具體信息。?般位于放在?件末尾,但如果為了?持http邊下載邊播放則需要將moov提前。注意,當(dāng)改變moov位置時(shí),內(nèi)部?些值需要重新計(jì)算。
mdat
Media Data Box,存放具體的媒體數(shù)據(jù)。
Moov Insider
mp4的媒體數(shù)據(jù)信息主要存放在Moov Box中,是我們需要分析的重點(diǎn)。moov的主要組成部分如下:
mvhd
Movie Header Box,記錄整個(gè)媒體?件的描述信息,如創(chuàng)建時(shí)間、修改時(shí)間、時(shí)間度量標(biāo)尺、可播放時(shí)?等。
下圖示例中,可以獲取?件信息如時(shí)?為 Duration: 5016 ms秒。
udta
User Data Box,?定義數(shù)據(jù)。
track
Track Box,記錄媒體流信息,?件中可以存在?個(gè)或多個(gè)track,它們之間是相互獨(dú)?的。
每個(gè)track包含以下?個(gè)組成部分:
tkhd
Track Header Box,包含關(guān)于媒體流的頭信息。下圖示例中,可以看到流信息如視頻流寬度800,?度1920。
?頻的tkhd,則?如duration、volume等。
mdia
Media Box,這是?個(gè)包含track媒體數(shù)據(jù)信息的container box。?box包括:
mdhd:Media Header Box,存放視頻流創(chuàng)建時(shí)間,?度等信息。
hdlr:Handler Reference Box,媒體的播放過程信息。
minf:Media Information Box,解釋track媒體數(shù)據(jù)的handler-specific信息。minf同樣是個(gè)containerbox,其內(nèi)部需要關(guān)注的內(nèi)容是stbl,這也是moov中最復(fù)雜的部分。stbl包含了媒體流每?個(gè)sample在?件中的offset,pts,duration等信息。想要播放?個(gè)mp4?件,必須根據(jù)stbl正確找到每個(gè)sample并送給解碼器。
mdia展開如下圖所示:
mdhd
Media Header Box,存放視頻流創(chuàng)建時(shí)間,?度等信息。視頻的mdhd,Time scale,Duration等信息。
?頻的mdhd,也類似視頻,但要注意Time scale,我們在計(jì)算時(shí)間戳的時(shí)候都要使?該Time scale,對應(yīng)我們流??的AVStream->time_base。
hdlr
Handler Reference Box,媒體的播放過程信息。視頻的hdlr,重點(diǎn)Component subtype: vide。
?頻的hdlr,Component subtype: soun,如果我們多個(gè)?軌的時(shí)候,Component name:粵語。
我們分析的?件另?路?軌,根據(jù)不同的名字來進(jìn)行區(qū)別。
minf
minf:Media Information Box,解釋track媒體數(shù)據(jù)的handler-specific信息。minf同樣是個(gè)containerbox,其內(nèi)部需要關(guān)注的內(nèi)容是stbl,這也是moov中最復(fù)雜的部分。stbl包含了媒體流每?個(gè)sample在?件中的offset,pts,duration等信息。想要播放?個(gè)mp4?件,必須根據(jù)stbl正確找到每個(gè)sample并送給解碼器。
?且需要注意的是,minf??的?容器,?頻和視頻軌是有區(qū)別的,?如視頻軌:vmhd, ?頻軌則為:smhd
vmhd
smhd
Stbl Insider
Sample Table Box,上?提到mdia中最主要的部分是存放?件中每個(gè)sample信息的stbl。在解析stbl前,我們需要區(qū)分chunk和sample這兩個(gè)概念。
在mp4?件中,sample是?個(gè)媒體流的基本單元,例如視頻流的?個(gè)sample代表實(shí)際的nal數(shù)據(jù)。chunk是數(shù)據(jù)存儲的基本單位,它是?系列sample數(shù)據(jù)的集合,?個(gè)chunk中可以包含?個(gè)或多的sample。
stbl?來描述每個(gè)sample的信息,包含以下?個(gè)主要的?box:
stsd
Sample Description Box,存放解碼必須的描述信息。下圖示例中,對于h264的視頻流,其具體類型為 avc1 ,extensions中其中存放有sps,pps等解碼必要信息。
視頻的stsd
??包含了avc1,avc1???包含了avcC和pasp。
avc1:包含了視頻Width、Height。
avcC:包含了視頻編碼器相關(guān)的信息,包括sps、pps等信息。
?頻的stsd
用Hexinator分析,包含了音頻相關(guān)的信息,比如采樣率,通道數(shù)。
stts
Time-to-Sample Box,定義每個(gè)sample時(shí)?。Time-To-Sample的table entry布局如下:
stts table entry布局
sample count:sample個(gè)數(shù)。
sample duration:sample持續(xù)時(shí)間。
持續(xù)時(shí)間相同的連續(xù)sample可以放到?個(gè)entry?達(dá)到節(jié)省空間的?的。這?先給出來的是視頻的stts,Number of entries,這個(gè)參數(shù)需要注意并不是sample的個(gè)數(shù),sample的實(shí)際數(shù)量需要將每個(gè)entry的sample count進(jìn)?累加才是真正的sample個(gè)數(shù)。
下圖示例中,第1個(gè)sample時(shí)間為3720,單位?mdhd的time scale進(jìn)?換算,?如視頻的是90000,此時(shí)換算成秒為3720/90000 = 0.0413333333333333秒。
再給出個(gè)?頻的stts,只是mdhd的time scale的差別,之前我們看到?頻為44100,則計(jì)算第?個(gè)sample的時(shí)間。1024/44100=0.0232199546485261秒。
stss
Sync Sample Box,同步sample表,存放關(guān)鍵幀列表,關(guān)鍵幀是為了?持隨機(jī)訪問。
stss的table entry布局如下:
stss table entry布局
下圖示例中,該視頻track有3個(gè)關(guān)鍵幀:
stsc
Sample-To-Chunk Box,sample-chunk映射表。
上?提到mp4通常把sample封裝到chunk中,?個(gè)chunk可能會包含?個(gè)或者?個(gè)sample。Sample-To-Chunk Atom的table entry布局如下圖所示:
First chunk:使?該表項(xiàng)的第?個(gè)chunk序號
Samples per chunk:使?該表項(xiàng)的chunk中包含有?個(gè)sample
Sample description ID:使?該表項(xiàng)的chunk參考的stsd表項(xiàng)序號
下圖示例中,可以看到該視頻track?共有1個(gè)stsc表項(xiàng),chunk序列1-x,每個(gè)chunk包含?個(gè)sample。這?則說明每個(gè)chunk??只有?個(gè)sample(?個(gè)chunk是可以有多個(gè)sample)。
stsz
Sample Size Box,指定了每個(gè)sample的size。Sample Size Atom包含兩sample總數(shù)和?張包含了每個(gè)sample size的表。
sample size 表的entry布局如下圖:
下圖示例中,該視頻流?共有110個(gè)sample,第1個(gè)sample??為42072字節(jié),第2個(gè)sample??為7354個(gè)字節(jié)。
stco
Chunk Offset Box,指定了每個(gè)chunk在?件中的位置,這個(gè)表是確定每個(gè)sample在?件中位置的關(guān)鍵。該表包含了chunk個(gè)數(shù)和?個(gè)包含每個(gè)chunk在?件中偏移位置的表。每個(gè)表項(xiàng)的內(nèi)存布局如下:
需要注意,這?stco只是指定的每個(gè)chunk在?件中的偏移位置,并沒有給出每個(gè)sample在?件中的偏移。想要獲得每個(gè)sample的偏移位置,需要結(jié)合 Sample Size box(stsz)和Sample-To-Chunk(stsc) 計(jì)算后取得。
下圖示例中,該視頻流第1個(gè)chunk在?件中的偏移為4750,?這?是每個(gè)chunk只有?個(gè)sample,此時(shí)第?個(gè)sample的起始位置就為4750->0x1D78,數(shù)據(jù)??則參照stsz,第?個(gè)sample size為172818。
?如偏移位置,7544->0x1D78。
如何計(jì)算sample偏移位置
上?提到通過stco并不能直接獲取某個(gè)sample的偏移位置,下?舉例說明如何獲取某?個(gè)pts對應(yīng)的sample在?件中的位置。
?體需要以下步驟:
(1)將pts轉(zhuǎn)換到媒體對應(yīng)的時(shí)間坐標(biāo)系。
(2)根據(jù)stts((decoding) time-to-sample)計(jì)算某個(gè)pts對應(yīng)的sample序號。
(3)根據(jù)stsc(sample-to-chunk)計(jì)算sample序號存放在哪個(gè)chunk中。
(4)根據(jù)stco(chunk offset)獲取對應(yīng)chunk在?件中的偏移位置。
(5)根據(jù)stsz獲取sample在chunk內(nèi)的偏移位置并加上第4步獲取的偏移,計(jì)算出sample在?件中的偏移。
例如,想要獲取3.64秒視頻sample數(shù)據(jù)在?件中的位置。
(1)根據(jù)time scale參數(shù),將3.64秒轉(zhuǎn)換為視頻時(shí)間軸對應(yīng)的3640000 (假如時(shí)間刻度不為毫秒)。
視頻軌:time scale為90000,轉(zhuǎn)成對應(yīng)的時(shí)間戳為3.64秒*90000。
(2)遍歷累加下表所示stts所有項(xiàng)?,計(jì)算得到3640000位于第110個(gè)sample = 327600。
(3)計(jì)算出多個(gè)sample_deltas疊加才到了327600, 我們這?姑且按3780作為平均值計(jì)算,實(shí)際是3720*1+3780*1+3690*1+3780*2 ...... 這樣?直疊加進(jìn)?。327600/3780 =86.66666666666667,取整為86。
(4)查詢下表所示stsc所有項(xiàng)?,計(jì)算得到第86個(gè)sample位于第86個(gè)chunk,并且在該chunk中位于第1個(gè)sample(因?yàn)槲覀兊拇a流是每個(gè)chunk對應(yīng)了?個(gè)sample)。
(5)查詢下表所示stco所有項(xiàng)?,得到第86個(gè)chunk在?件中偏移位置為1004678。使?hexinator。
(6)查詢下表所示stsz所有項(xiàng)?,得到第86個(gè)sample的size為20934。計(jì)算得到3.64秒視頻sample數(shù)據(jù)在?件中。
offset:1004678+0 = 1004678
size:20934。
驗(yàn)證:?編輯器打開mp4?件,定位到?件偏移1004678位置。09分隔符,這?占?了6個(gè)字節(jié), 再看真正的數(shù)據(jù)區(qū)域,前4字節(jié)也為 NALU的?度0x000051bc=20924。
總共占?的字節(jié)計(jì)算 4+2+4+20924 = 20934。
《整理mp4協(xié)議重點(diǎn),將協(xié)議讀薄》:
?個(gè)chunk含有多個(gè)sample的情景參考下?鏈接進(jìn)?分析:
mp4?件格式重點(diǎn)解析:https://www.jianshu.com/p/44c9567d8fcb
本篇文章就分析到這里,非常詳細(xì)的MP4分析,如果對你有用,可以關(guān)注,點(diǎn)贊,收藏,轉(zhuǎn)發(fā)。
在剛接觸 p5.js 時(shí)我以為這只是一個(gè)藝術(shù)方向的 canvas 庫,沒想到它還支持視頻文件和視頻流的播放。
本文簡單講講如何使用 P5.js 播放視頻。
p5.js 除了可以使用 video 元素播放視頻外,還支持使用 image 控件播放視頻。
p5.js 的 createVideo() 方法可以創(chuàng)建一個(gè) <video> 元素。
createVideo(src, [callback]) 可以傳入2個(gè)參數(shù):
錄制 GIF 后比較卡,將就看著吧~
// 加載本地視頻
let playing = false // 播放狀態(tài)
let video = null // 視頻
let button = null // 按鈕
// 視頻加載完成的回調(diào)函數(shù)
function afterLoad() {
console.log('加載完成')
}
// 加載資源的生命周期
function preload() {
video = createVideo('assets/02.mp4', afterLoad)
}
// 初始化的生命周期
function setup() {
noCanvas()
button = createButton('播放')
button.mousePressed(toggleVid)
}
// 點(diǎn)擊按鈕的事件
function toggleVid() {
if (playing) {
video.pause()
button.html('播放')
} else {
video.loop()
button.html('暫停')
}
playing = !playing;
}
粗略講講上面這段代碼。
除了 video.loop() 方法,還可以使用 video.play() 播放視頻。loop 是循環(huán)播放;play 只播放一次,播完就暫停。
createVideo() 方法的第一個(gè)參數(shù)除了傳入一個(gè)字符串類型的視頻地址外,還可以傳入字符串?dāng)?shù)組,作用就是兼容處理。
比如你的視頻資源只有 2.mp4,你希望可以先播放 1.mp4,沒有這個(gè)視頻再播放 2.mp4,就可以這樣寫:
createVideo(['1.mp4', '2.mp4'])
但通常我們不會這樣寫,通常我們會給同一個(gè)視頻提供不同的視頻格式,然后用這種方法傳入多個(gè)視頻地址。
因?yàn)橛行g覽器不一定支持你想播放的地址,此時(shí)就可以做個(gè)保底處理。
使用 createVideo() 方法創(chuàng)建完視頻后,可以通過 size(width, height) 設(shè)置視頻的寬高。
let video = null
function preload() {
video = createVideo('assets/02.mp4')
video.size(300, 600)
}
使用 createVideo() 創(chuàng)建的視頻控件可以使用 volume() 設(shè)置視頻的音量,該方法接受1個(gè)參數(shù),參數(shù)值在 0~1 之間。
let video = null
function preload() {
video = createVideo('assets/02.mp4', videoLoaded)
}
function videoLoaded() {
video.volume(0.5) // 將視頻音量設(shè)置為50%
}
一開始我也沒想到 image 控件可以播放視頻,誤打誤撞試出來的。
這次我就不錄屏了,工友們自己運(yùn)行試試看吧。
let playing = false
let video = null
let button = null
function preload() {
video = createVideo('assets/02.mp4')
}
function setup() {
video.hide()
createCanvas(568, 320)
button = createButton('播放')
button.mousePressed(toggleVid)
}
function draw() {
image(video, 0, 0)
}
function toggleVid() {
if (playing) {
video.pause();
button.html('播放');
} else {
video.loop();
button.html('暫停');
}
playing = !playing;
}
上面的代碼中,我在 setup() 里使用了 video.hide() 方法將 createVideo() 創(chuàng)建出來的 <video> 元素隱藏起來,因?yàn)檫@次我們需要將視頻渲染到畫布中,所以不再需要 <video> 了。
接著我們在 draw() 里用 image 不斷刷新視頻,所以上面這樣寫是對的。
其他地方?jīng)]變化。
如果你的設(shè)備有攝像頭,p5.js 是支持調(diào)用攝像頭并將內(nèi)容展示在畫布上的。
let capture
function setup() {
createCanvas(480, 360)
capture = createCapture(VIDEO)
capture.hide()
}
function draw() {
image(capture, 0, 0, capture.width, capture.height)
}
通過 createCapture() 方法創(chuàng)建一個(gè)包含攝像頭的音頻/視頻源 <video> 元素,把這個(gè)元素的內(nèi)容放在 p5.js 的 image 控件里。
這個(gè)默認(rèn)是顯示的,而且它是一個(gè)獨(dú)立的元素,默認(rèn)和畫布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來,不然頁面中會出現(xiàn)兩個(gè)視頻窗口。
其他做法和前面的【方式2】差不多,這里就不再啰嗦了。
《p5.js 光速入門》
《p5.js 使用npm安裝p5.js后如何使用?》
《p5.js 變換操作》
《p5.js 3D圖形-立方體》
《p5.js 開發(fā)點(diǎn)彩畫派的繪畫工具》
《p5.js畫布操作實(shí)戰(zhàn):創(chuàng)建,綁定指定元素,動態(tài)調(diào)整大小,隱藏滾動條,刪除畫布》
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會了
網(wǎng)頁中添加視頻、聲音、動畫等,可以增強(qiáng)用戶體驗(yàn)。在HTML5之前,為網(wǎng)頁添加多媒體的唯一辦法,就是使用第三方的插件(如,Adobe Flash等)。
HTML5中,提供了對多媒體的原生支持,只需通過 video 元素,就可以向網(wǎng)頁嵌入視頻、電影或音頻資源,通過 audio 元素向網(wǎng)頁嵌入音頻資源,省時(shí)省力。
HTML中嵌入視頻和音頻代碼
在HTML5時(shí)代,在網(wǎng)頁中嵌入視頻非常簡單,只需要一個(gè) video 元素,并設(shè)置它的 src 屬性,使其鏈接一個(gè)視頻地址就可以完全搞定了,這個(gè)太esay了
<video src="media/vedio.mp4"></video>
把這個(gè)網(wǎng)站在IE8中打開一看,網(wǎng)站上除了一片空白外,什么也沒有,這是為什么呢?
原來 video 是HTML5最新引入的元素,并不是所有瀏覽器都支持它,IE8及以下版本都無法識別 video 標(biāo)簽。如果瀏覽器不識別 video標(biāo)簽,則會忽略它,當(dāng)做什么都沒有。這就是網(wǎng)站上一片空白的原因。
這個(gè)問題好解決,只需在 video 標(biāo)簽之間放置文本信息,不支持 video 標(biāo)簽的老瀏覽器,會顯示 video 標(biāo)簽之間的文本信息,以提示用戶瀏覽器不支持 video,就這么簡單!
<video src="media/vedio.mp4">
你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!
</video>
在IE8上打開一看,確實(shí)顯示了提示文本,這下好多了,至少用戶知道自己的瀏覽器不能播放視頻,該換瀏覽器了。
下載了Opera瀏覽器的最新版本25.0,打開一看,怎么還是一片空白外!Opera瀏覽器明明是支持video標(biāo)簽的,那又是為什么呢?
這個(gè)就得從視頻的編碼格式說起了。video 元素支持三種視頻格式:Ogg、MP4、WebM。
Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件,后綴名為 .ogg;MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件,后綴名為 .mp4;WebM是VP8視頻編碼和Vorbis音頻編碼的文件,后綴名為 .webm。
這個(gè)Opera瀏覽器呢,它可以支持ogg,但不支持mp4。由于Opera支持video標(biāo)簽,故video標(biāo)簽之間的文本信息沒有顯示出來,但它不支持ogg,所以就不進(jìn)行播放,最終導(dǎo)致頁面出現(xiàn)一片空白。這下可怎么辦呢?
其實(shí)辦法有的是,我們可以從網(wǎng)上下載一副圖像,放到視頻播放窗口,如果視頻無法播放,就顯示這張圖片,是不是更好呢?從網(wǎng)上下載一張美女圖片,干脆叫beauty.jpg吧。那這個(gè)圖像怎么添加到視頻窗口呢?
video標(biāo)簽有個(gè)poster 屬性,就是專門在視頻窗口放置圖片的。poster是一個(gè)video的占位符,無論什么情況下,只要視頻還沒有播放(視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點(diǎn)擊播放按鈕前),就會顯示該圖像,可以看做是視頻播放之前插入的宣傳畫或海報(bào)。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!
</video>
在Opera瀏覽器上刷新一下,真的有一個(gè)美女沖著自己微笑呢。雖然視頻沒有播放出來,這回心情卻是好多了。
那我可不能一天到晚只看美女呀,視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4,我們就換成需要ogg吧,這樣就肯定沒問題了。
我想了想,這個(gè)辦法不好,萬一某個(gè)瀏覽器只支持支持ogg,不支持mp4呢。這年頭,什么都缺,就是不缺點(diǎn)子,隨便在網(wǎng)上一搜,辦法就有了。
在 video 元素中添加 source 元素,就可以解決這個(gè)問題。在source 元素中,通過 src 屬性指定視頻的地址,通過 type 屬性指定視頻的類型,以幫助瀏覽器決定是否能播放該視頻。并且,在 video 元素中可以添加任意多個(gè)source 元素,讓不同的 source 元素鏈接到不同的視頻文件。
這樣的話,當(dāng)瀏覽器發(fā)現(xiàn) video 元素時(shí),首先會查看它本身是否定義了 src 屬性。如果沒有,就會檢查 source 元素。瀏覽器會逐個(gè)查看這些視頻源,直到找到一個(gè)可以播放的視頻。一旦找到,就會播放它并忽略其他的視頻源。我們干脆添加兩個(gè)source,一個(gè)是mp4,一個(gè)是ogg,這下視頻是一定能播放出來了。
<video poster = "img/beauty.jpg">
<source src="media/vedio.mp4" type="video/mp4">
<source src="media/vedio.ogg" type="video/ogg">
你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!
</video>
在Opera瀏覽器上又刷新一下,只有美女沖著我微笑,視頻還是沒播放出來。唉,太粗心了,忘記添加播放視頻的控件了。
在video標(biāo)簽中,通過添加controls 屬性來為視頻添加播放控件,方便用戶執(zhí)行播放、暫停操作和音量控制。
<video poster = "img/beauty.jpg" controls>
(此處略去500字…)
</video>
在Opera瀏覽器上又刷新一下,效果真的不一樣,這次不僅看到美女,還看到了視頻控件。用鼠標(biāo)猛戳一下那個(gè)播放按鈕,哈哈,不錯(cuò),真的聽到美妙的旋律。我們的ogg文件,終于播放出來了,讓我們好好享受一下吧O(∩_∩)O。
聽了一會,忽然一想,不對呀,我剛才點(diǎn)了播放按鈕后,等了半天才聽到聲音。能不能我一點(diǎn)播放按鈕,就立即播放呢?
原來視頻也是需要下載緩存的,點(diǎn)擊播放按鈕后,首先緩存,然后才播放的。那能不能在頁面加載的同時(shí)就緩存呢。這樣,用戶點(diǎn)擊播放后,就不必等待了。
這當(dāng)然可以,在video標(biāo)簽中,通過添加preload屬性來為視頻添加預(yù)加載功能,在頁面加載的同時(shí)加載視頻。
<video poster = "img/beauty.jpg" controls preload>
(此處略去500字…)
</video>
關(guān)于 preload 屬性,稍微再啰嗦一點(diǎn),就是可以把它設(shè)置為 metadata,讓瀏覽器僅僅預(yù)加載視頻的基本信息,如尺寸、時(shí)長、以及一些關(guān)鍵的幀。這樣的話,在開始播放之前,瀏覽器可以提前計(jì)算視頻的顯示尺寸。
既然一切都OK了!讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器,打開網(wǎng)頁,猛戳一下播放按鈕。
等等~,等等~,不對,怎么只有聲音沒有畫面,明明是mp4格式的文件呀?使用暴風(fēng)影音試了一下,是有畫面的呀!
辛辛苦苦又在網(wǎng)上搜了一番,花了整整586秒,終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。
找了一個(gè) h.264 編碼格式的 mp4 試了一下,不錯(cuò),確實(shí)有圖像了!看了半天,原來是一部老外的電影,嘰里咕嚕一陣,一句話也沒聽懂。那O(∩_∩)O~,能否提供中文字幕呢,這樣就不必費(fèi)老大勁去聽了!
HTML5中,通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式:WebVTT和TTML。WebVTT是Web視頻文本軌跡(Web Video Text Track),是UTF-8編碼格式的文本文件;TTML是時(shí)序文本標(biāo)記語言(Timed Text Markup Language),是XML格式的文件。兩種文件的具體格式,已經(jīng)超出我們的討論范圍。
video元素支持添加多個(gè)track元素,不同的track元素鏈接到不同的字幕文件。用戶可以在各個(gè)字幕間進(jìn)行切換。
<video poster = "img/beauty.jpg" controls preload>
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">
</video>
track元素中,src屬性指定字幕文件的URL;srclang屬性字幕文件的語言類型,若kind 屬性值是 "subtitles" 時(shí),該屬性必需的;label 屬性指定字幕標(biāo)簽,每個(gè)字幕元素必需設(shè)置一個(gè)唯一不重復(fù)的標(biāo)簽,切換字幕時(shí),會顯示標(biāo)簽的名稱;kind指定字幕內(nèi)容類型,只能是subtitles、captions、descriptions、chapters、metadata 之一;default屬性指定是否是默認(rèn)字幕,如果一個(gè)都沒指定,將不會自動顯示字幕。
除了字幕外,我還希望對視頻進(jìn)行過多的控制,比如讓視頻自動播放、循環(huán)播放、默認(rèn)靜音,以及視頻窗口的尺寸等等,這些都能做到嗎?
這已經(jīng)不是什么事了,video 元素已經(jīng)提供了相關(guān)屬性,根據(jù)需要設(shè)置相應(yīng)的屬性就可以了。這些屬性及含義見表 23:
HTML中嵌入視頻和音頻代碼
哦,原來這么簡單呀!那就到此為止吧,網(wǎng)頁中嵌入視頻的全部代碼都在這里,就打包給你吧!
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src="media/vedio.mp4">
<source src="media/vedio.ogg">
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">
你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!
</video>
睜大眼睛一看,卻只有7行代碼。然而,就這區(qū)區(qū)7行代碼,可把他折磨得夠嗆。
看著這一切都全部搞定,他仰望著天空,長長呼了一口氣,顯得是那么的放松,那么的愜意。此時(shí),他閉上眼睛,在自己的夢幻世界里遨游!
有了在網(wǎng)頁中嵌入視頻的經(jīng)歷,要在網(wǎng)頁中嵌入音頻,那簡直就是小菜一碟了。只要把vedio元素?fù)Q成 audio 元素,就全部搞定。
但需要了解的是,audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道,由于音頻沒有畫面,也就沒有 width、height、poster 屬性,而其他屬性都支持,并且跟視頻的含義相同。
網(wǎng)頁中嵌入音頻的代碼如下:
<audio controls preload autoplay loop muted>
<source src="media/audio.mp3">
<source src="media/audio.wav">
<source src="media/audio.ogg">
你的瀏覽器已經(jīng)老掉牙了,不支持audio,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!
</audio>
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。