.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 控件播放視頻。

方式1：video元素播放視頻

基礎(chǔ)用法

p5.js 的 createVideo() 方法可以創(chuàng)建一個(gè) <video> 元素。

createVideo(src, [callback]) 可以傳入2個(gè)參數(shù)：

• src: 視頻路徑（必傳）。可以傳一個(gè)字符串類型的視頻路徑；也可以傳入字符串?dāng)?shù)組類型，指定多個(gè)路徑支持不同瀏覽器。
• callback: 回調(diào)函數(shù)（非必傳）。在視頻加載完成時(shí)觸發(fā)。

錄制 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;
}

粗略講講上面這段代碼。

• preload() 是 p5.js 提供的一個(gè)生命周期，我們通常會將“加載靜態(tài)資源”這個(gè)步驟放在 preload() 里執(zhí)行。在 《p5.js光速入門》的圖片 章節(jié)里介紹過。
• setup() 是一個(gè)初始化的生命周期。
• createVideo() 方法加載視頻。第二個(gè)參數(shù)傳入回調(diào)函數(shù) afterLoad，在加載完視頻資源后會執(zhí)行回調(diào)函數(shù)。
• video.loop() 方法可以播放視頻。
• video.pause() 方法可以暫停視頻。
• noCanvas() 方法用來隱藏 <canvas> 元素，因?yàn)槲覀兪褂?createVideo() 會在頁面創(chuàng)建一個(gè) <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

除了 video.loop() 方法，還可以使用 video.play() 播放視頻。loop 是循環(huán)播放；play 只播放一次，播完就暫停。

傳入多個(gè)視頻地址

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è)保底處理。

設(shè)置視頻窗口尺寸

使用 createVideo() 方法創(chuàng)建完視頻后，可以通過 size(width, height) 設(shè)置視頻的寬高。

let video = null

function preload() {
  video = createVideo('assets/02.mp4')
  video.size(300, 600)
}

設(shè)置音量

使用 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%
}

方式2：用image控件播放視頻

一開始我也沒想到 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í)省力。

一、視頻

在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：

哦，原來這么簡單呀！那就到此為止吧，網(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>