視頻，其實(shí)就是一系列連續(xù)播放的圖片，如果1s鐘播放24張圖片，那么人眼看到的就不再是一張張獨(dú)立的圖片，而是動起來的畫面。其中一張圖片稱為一幀，1s播放的圖片數(shù)稱為幀率。常見的幀率有24幀/s，30幀/s,32幀/s。

視頻是由圖片構(gòu)成的，圖片是由像素構(gòu)成的，假設(shè)尺寸為 1024*768。每個像素由RGB構(gòu)成，每個8位，共24位。

這里補(bǔ)充一點(diǎn)2進(jìn)制的知識

1位10進(jìn)制數(shù)，能夠表示0-9，共10種可能
類比一下，1位2進(jìn)制，能夠表示0，1，共表示2種可能性。
一位2進(jìn)制稱為1比特，即1 bit。
byte?字節(jié)是計算機(jī)計量的基本單位，1?byte=?8bit
1位16進(jìn)制能夠表示0-15，共16種可能性，如果換算成2進(jìn)制，2^4=16,需要4位二進(jìn)制才能表示1位16進(jìn)制數(shù)。
1byte=8bit=2個16進(jìn)制數(shù)
像素用16進(jìn)制表示為?#ffffff,需要6個16進(jìn)制，也就是3byte

假設(shè)幀率是30，那么每秒鐘的視頻的尺寸如下：

30幀x1024x768x24=566231040Bits=70778880Bytes

一分鐘視頻的尺寸就是 4246732800Bytes已經(jīng)是4個G了。

1Byte=8bit
1MB=1024Byte(2^10)
1GB=1024MB(2^20Byte)

可以看到，這個數(shù)據(jù)量是很大的，不好進(jìn)行網(wǎng)絡(luò)傳輸以及存儲，所以需要對視頻進(jìn)行壓縮，也就是編碼。

編碼過程

之所以能夠?qū)σ曨l的中圖片進(jìn)行壓縮，是因?yàn)橐曨l和圖片具有以下特點(diǎn):

• 空間冗余：圖像的相鄰像素之間有較強(qiáng)的相關(guān)性，一張圖片相鄰像素往往是漸變的，不是突變的，沒必要每個像素都完整地保存，可以隔幾個保存一個，中間的用算法計算出來。
• 時間冗余：視頻序列的相鄰圖像之間內(nèi)容相似。一個視頻中連續(xù)出現(xiàn)的圖片也不是突變的，可以根據(jù)已有的圖片進(jìn)行預(yù)測和推斷。
• 視覺冗余：人的視覺系統(tǒng)對某些細(xì)節(jié)不敏感，因此不會每一個細(xì)節(jié)都注意到，可以允許丟失一些數(shù)據(jù)。
• 編碼冗余：不同像素值出現(xiàn)的概率不同，概率高的用的字節(jié)少，概率低的用的字節(jié)多，類似霍夫曼編碼（Huffman Coding）的思路。

編碼的流程如下：

經(jīng)過編碼之后，視頻由一幀幀的圖片，變成了一串串讓人看不懂的二進(jìn)制代碼，因?yàn)榫幋a的方式(算法)的不同，所以就有了編碼格式的區(qū)分。常見的編碼格式有 H.264,MPEG-4,VP8等。

這里需要注意的一點(diǎn)是，因?yàn)榫幋a格式是有版權(quán)問題的，所以不同的瀏覽器支持的編碼格式不同，所以就會出現(xiàn)有些編碼格式的視頻在某些瀏覽器播放不了，或者只有聲音沒有畫面的情況。

我們前端開發(fā)只需要記住一點(diǎn)，主流瀏覽器支持的視頻編碼格式是h264。

總結(jié)并補(bǔ)充一些概念

分辨率

屏幕是由一個個像素點(diǎn)組成的，我們常見的1080p，是指屏幕豎直方向有1080個像素，共有1920列，一共207萬像素。2K，2560x1440，共369萬像素。

放一個百度百科的解釋

顯示分辨率（屏幕分辨率）是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少。由于屏幕上的點(diǎn)、線和面都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細(xì)，同樣的屏幕區(qū)域內(nèi)能顯示的信息也越多，所以分辨率是個非常重要的性能指標(biāo)之一?？梢园颜麄€圖像想象成是一個大型的棋盤，而分辨率的表示方式就是所有經(jīng)線和緯線交叉點(diǎn)的數(shù)目。顯示分辨率一定的情況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示分辨率越高圖像越清晰。

分辨率對視頻體積有一定影響，但是不是分辨率越大，視頻越清晰，還要看碼率。

###幀率FPS

每秒顯示的幀數(shù)，就是1s播放的圖片數(shù)量(Frames per Second)。

百度百科解釋：

由于人類眼睛的特殊生理結(jié)構(gòu)，如果所看畫面之幀率高于24的時候，就會認(rèn)為是連貫的，此現(xiàn)象稱之為視覺暫留。這也就是為什么電影膠片是一格一格拍攝出來，然后快速播放的。
而對游戲，一般來說，第一人稱射擊游戲比較注重FPS的高低，如果FPS<30的話，游戲會顯得不連貫。所以有一句有趣的話：“FPS（指FPS游戲）重在FPS（指幀率）。
每秒的幀數(shù)(fps)或者說幀率表示圖形處理器處理場時每秒鐘能夠更新的次數(shù)。高的幀率可以得到更流暢、更逼真的動畫。一般來說30fps就是可以接受的，但是將性能提升至60fps則可以明顯提升交互感和逼真感，但是一般來說超過75fps一般就不容易察覺到有明顯的流暢度提升了。如果幀率超過屏幕刷新率只會浪費(fèi)圖形處理的能力，因?yàn)楸O(jiān)視器不能以這么快的速度更新，這樣超過刷新率的幀率就浪費(fèi)掉了。

碼率（比特率）

碼率，也叫比特率，幀率是1S播放多少幀，類比一下，比特率就是1s的視頻有多少bit。

這個參數(shù)決定了視頻是否清晰。

一個1080P的視頻，大小可以為1G，也可以為4G，視頻越大，說明1S存放的數(shù)據(jù)越多，比特率越高，壓縮比越小，視頻越清晰。

1080P，長度為100分鐘，大小為1GB的視頻的比特率是多少？

總時間為
100分鐘=100X60S=6000s
總數(shù)據(jù)量為
1GB=1024MB=?1024X1024KB=1024X1024X1024Byte=1024X1024X1024X8bit=8589934592bit
幀率為?(數(shù)據(jù)量/時間)
8589934592/6000?=?1.4Mbit/s

幀率和分辨率都可以影響視頻體積，但是幀率是主要因素，在工作中如果看到一個很短的視頻非常大，很大可能性是因?yàn)閹屎艽?，為了便于網(wǎng)絡(luò)傳輸，需要降低幀率。一般來說主流視頻平臺的幀率在1Mbit/s左右。

音頻是什么

音頻這里的概念有點(diǎn)多，我也不太會，如果一次有看不懂的地方，請發(fā)在評論區(qū)。我改。

聲音是由物體振動產(chǎn)生的，振動的快慢(頻率)決定了聲音的音調(diào)(男高音，男低音)，振動的幅度決定了聲音的大?。ㄒ袅縷響度），振動的物體的特性決定了聲音的音色。音調(diào)、音量和音色稱為聲音的三要素。

聲音可以用模擬信號來表示的,模擬信號的概念如下：

模擬信號是指用連續(xù)變化的物理量表示的信息，其信號的幅度，或頻率，或相位隨時間作連續(xù)變化，或在一段連續(xù)的時間間隔內(nèi)，其代表信息的特征量可以在任意瞬間呈現(xiàn)為任意數(shù)值的信號。

橫軸是時間

模擬信號是連續(xù)的，在傳輸時特別容易受干擾，所以在模擬信號在傳輸時經(jīng)常要轉(zhuǎn)化成不連續(xù)的數(shù)字信號。轉(zhuǎn)化的過程主要包括：采樣、量化、編碼等過程。

你可以把采樣理解為打點(diǎn)，在0-1s內(nèi)打48000個點(diǎn)，就采樣了48000次，采樣率就是48000。

量化是指在縱軸(y軸)上對聲音進(jìn)行數(shù)字化，決定了y軸的范圍。比如用16bit的數(shù)據(jù)表示聲音的一個采樣，16bit表示的范圍是[-32768,32767]，供65536個可能的取值。

編碼就是按照一定的格式記錄采樣和量化之后的數(shù)據(jù)。音頻的原始數(shù)據(jù)是PCM數(shù)據(jù)，Pulse Code Modulation，包含以下內(nèi)容：

• 采樣大小
• 一個采樣用多少bit存放，常用的16bit,采樣大小越大
• 采樣率
• 1s采樣多少次
• 聲道數(shù)
• 左聲道、右聲道，雙聲道

音頻的比特率（1s種音頻的大?。┯嬎惴绞綖?/p>

音頻碼率=采樣大小*采樣率*聲道

以 CD 的音質(zhì)為例：量化格式為 16 bit （2 byte）,采樣率 44100 ，聲道數(shù)為 2,，存放1s鐘音頻數(shù)據(jù)需要的大小為

44100?*?16?*?2?=?1378.125?kbps

如果是1分鐘，需要的大小為

1378.125?*?60?/?8?/?1024?=?10.09?MB

本段參考內(nèi)容：

• 百度百科-模擬信號及模數(shù)轉(zhuǎn)換
• 百度百科-數(shù)字信號
• 音視頻學(xué)習(xí)-掌握音頻基礎(chǔ)知識

音頻編碼

CD音質(zhì)的音頻，存放一分鐘數(shù)據(jù)需要的大小為10M，太大了，也需要壓縮（編碼）。編碼的過程大概如下：

常見的編碼方式有：WAV、MP3和AAC格式。

音頻的編碼方式不像視頻那樣那么多，而且音頻在各個瀏覽器基本上都可以播放。

具體的每種編碼格式包含的音頻是怎么構(gòu)成的，這里就不講了。

封裝格式

我們把視頻數(shù)據(jù)、音頻數(shù)據(jù)打包到一起，然后再添加一些基本信息，例如分辨率、時長、標(biāo)題等，構(gòu)成一個文件，這個文件稱為封裝格式。常見的封裝格式有MP4,MOV,MPEG,WEBM等。

主要封裝格式如下：

從上表中可以看到，封裝格式往往是與視頻編碼無關(guān)的，一個mp4文件，里面的視頻流編碼可以是h264，也可以是mpeg-4，所以就會出現(xiàn)，同樣都是mp4文件，有的瀏覽器可以放，有的瀏覽器就放不了的問題，因?yàn)槟懿荒芊攀怯梢曨l碼流的編碼格式?jīng)Q定的。

上表參考自:

• 視音頻編解碼技術(shù)零基礎(chǔ)學(xué)習(xí)方法-雷霄驊

說完了一些理論知識，下面開始實(shí)踐一下。

操作音視頻必備工具-FFMPEG

A complete, cross-platform solution to record, convert and stream audio and video.

FFMPE是音視頻處理最常用的開源軟件，本文主要介紹它的命令行工具。

首先，安裝FFMPEG,

• MAC安裝FFMPEG
• WINDOS安裝FFMPEG
• LINUX安裝FFMPEG

裝不上請自行百度。

一些概念

支持的封裝格式

復(fù)習(xí)一下，我們常見的視頻文件，其實(shí)是一個容器，里面包含的視頻數(shù)據(jù)、音頻數(shù)據(jù)、字幕（非必須）及一些元數(shù)據(jù)（視頻標(biāo)題，時長，分辨率信息）等。常見的封裝格式有(通過后綴名反映封裝格式)

MP4MKVWebMAVI

查看ffmpeg支持的封裝格式（container）

ffmpeg?-formats

以上輸入會很多，可以使用grep過濾，例如我們想查看是否支持FLV格式，可以使用以下命令：

ffmpeg?-codecs?|?grep?FLV

支持的編碼格式

上面說過，音視頻文件需要經(jīng)過編碼壓縮，才能保存為文件。不同的編碼格式有不同的壓縮率，導(dǎo)致不同的清晰度和文件大小。

常見的視頻編碼格式如下：

H.262H.264H.265MPEG-4

常見的音頻編碼格式如下：

MP3AAC

查看ffmpeg支持的編碼格式,視頻編碼和音頻編碼都在內(nèi)

ffmpeg?-codecs

編碼器

編碼器(encoders)是實(shí)現(xiàn)某種編碼格式的庫文件，只有安裝了某種格式的編碼器，才能實(shí)現(xiàn)對應(yīng)格式視頻/音頻的編解碼。

FFMPEG內(nèi)置的視頻編碼器

libx264：最流行的開源 H.264 編碼器NVENC：基于 NVIDIA GPU 的 H.264 編碼器libx265：開源的 HEVC 編碼器libvpx：谷歌的 VP8 和 VP9 編碼器libaom：AV1 編碼器

音頻編碼器

libfdk-aacaac

以下命令查看已安裝的編碼器

ffmpeg?-encoders

ffprobe查看視頻信息

ffprobe是ffmpeg提供的一個命令行工具，用來查看視頻元數(shù)據(jù)以及音視頻碼流的編碼信息等，使用很簡單

ffprobe?1.mp4

輸出如下：

ffmpeg命令行使用格式

ffmpeg?{1}?{2}?-i?{3}?{4}?{5}

五個部分的參數(shù)依次如下：

1. 全局參數(shù)
2. 輸入文件參數(shù)
3. 輸入文件，必需
4. 輸出文件參數(shù)
5. 輸出文件，必需

舉個簡單的栗子：

ffmpeg?-i?1.mp4?output.webm

上面的代碼是把封裝格式為mp4的文件轉(zhuǎn)成封裝格式為webm格式的文件，只輸入了輸入文件和輸出文件。

以上代碼沒有指定視頻碼流的編碼格式的音頻碼流的編碼格式，ffmpeg會自動選擇編碼格式具體選擇的是什么編碼格式，可以等轉(zhuǎn)換完成之后自己使用ffprobe查看一下。ffprobe output.webm

如果只想轉(zhuǎn)換封裝格式，編碼格式不變，可以在輸出文件參數(shù)那里添加-c copy

ffmpeg?-i?1.mp4?-c?copy?output.avi

常見參數(shù)

• -c：指定編碼器
• -c copy：直接復(fù)制，不經(jīng)過重新編碼（這樣比較快）
• -c:v：指定視頻編碼器
• -c:a：指定音頻編碼器
• -i：指定輸入文件
• -an：去除音頻流
• -vn：去除視頻流
• -preset：指定輸出的視頻質(zhì)量，會影響文件的生成速度，有以下幾個可用的值 ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow。
• -y：不經(jīng)過確認(rèn)，輸出時直接覆蓋同名文件。

常見用法

建議新建個文件夾，把所有的命令都試驗(yàn)一遍吧

查看視頻信息

使用ffprobe查看視頻信息

參數(shù)格式：ffprobe [options] [input_file]

#?最簡單用法
ffprobe?1.mp4
#?不顯示歡迎信息，只顯示流相關(guān)信息
ffprobe?-hide_banner?1.mp4
#?以json形式顯示每個流信息
ffprobe?-print_format?json?-show_streams?1.mp4
#?顯示容器格式相關(guān)信息
ffprobe?-show_format?1.mp4

參數(shù)說明：

• hide_banner 不顯示歡迎信息和配置信息，只顯示視頻元數(shù)據(jù)
• show_format 顯示容器格式相關(guān)信息

轉(zhuǎn)換編碼格式

轉(zhuǎn)換容器格式和編碼格式。

如果沒有手動指定封裝格式中視頻流和音頻流的編碼格式，ffmpeg會根據(jù)輸出的封裝格式自行決定使用什么編碼。

ffmpeg?-i?input.mp4?output.mpeg

指定視頻碼流編碼格式。

轉(zhuǎn)化為H.264編碼，一般使用編碼器libx264

#?轉(zhuǎn)化為?H.264格式
ffmpeg?-i?1.mp4?-c:v?libx264?output.mp4
#?轉(zhuǎn)化為?H.265格式
ffmpeg?-i?1.mp4?-c:v?libx265?output-265.mp4

參數(shù)說明：

• -c:v 指定視頻編碼器
• -c:a 指定音頻編碼器

轉(zhuǎn)換容器格式

mp4轉(zhuǎn)為avi

ffmpeg?-i?input.mp4?-c?copy?output.avi

上面例子中，只是轉(zhuǎn)一下容器，內(nèi)部的編碼格式不變，所以使用-c copy指定直接拷貝，不經(jīng)過轉(zhuǎn)碼，這樣比較快

#?不使用?-c?copy參數(shù)，ffmpeg會自己判斷輸入文件的編碼
ffmpeg?-i?input.mp4?output.webm

轉(zhuǎn)換時可以手動指定編碼格式

#?轉(zhuǎn)換時可以手動指定編碼格式
ffmpeg?\\
-y?\\?#?全局參數(shù)
-c:a?libfdk_aac?-c:v?libx264?\\?#?輸入文件參數(shù)
-i?input.mp4?\\?#?輸入文件
-c:v?libvpx-vp9?-c:a?libvorbis?\\?#?輸出文件參數(shù)
output.webm?#?輸出文件

調(diào)整碼率(比特率)

調(diào)整碼率指的是，改變編碼的比特率，一般用來將視頻文件的體積變小。

比特率計算：視頻多少比特(bit)/視頻時長(s)

例如一個視頻是2.6M 換算成比特 2.6x1024x1024x8=21810380.8 bit

視頻是22s

比特率：21810380.8/22=991 Kb/s

設(shè)置碼率：

#?設(shè)置輸出的碼率為1.5M,ps:最后的輸出視頻碼率會有一些小的偏差
ffmpeg?-i?input.mp4?-b?1.5M?output.mp4
#?默認(rèn)情況下，ffmpeg使用可變比特率(VBR)進(jìn)行設(shè)置，靜態(tài)的畫面使用較少的碼率，動態(tài)的畫面使用較多的碼率

參數(shù)說明

• -b 指定視頻流和音頻流總體的比特率
• 可以使用-b:v -b:a 分別指定視頻流和音頻流的比特率

也可以手動指定 最小比特率，最大比特率，以及緩沖區(qū)的大小：

ffmpeg?-i?input.mp4?-minrate?964k?-maxrate?3856k?-bufsize?2000k?output.mp4

如果是視頻會議之類的實(shí)時視頻流，可以使用固定碼率(CBR)：

固定碼率是指所有的畫面使用相同的碼率

#?-b?-minrate?-maxrate?需要指定固定的值，maxrate需要指令一個bufsize(緩沖區(qū)大小)
ffmpeg?-i?input.mp4?-b?0.5M?-minrate?0.5M?-maxrate?0.5M?-bufsize?1M?output.mp4

改變分辨率

#?將分辨率調(diào)整為640*480?
ffmpeg?-i?input.mp4??-vf?scale=640:480?output.mp4

#?按照原比率進(jìn)行調(diào)整
ffmpeg?-i?input.mp4?-vf?scale=480:-1?output.mp4

參數(shù)說明

• vf 濾鏡
• vf scale 調(diào)整分辨率

分離視頻（去除視頻中的音頻）

#?ffmpeg?-i?input.mp4?-c:v?copy?-an?output.mp4

參數(shù)說明

• an 去除音頻流

分離音頻

ffmpeg?-i?input.mp4?-vn?-c:a?copy?output.aac

參數(shù)說明

• vn 表示去掉視頻
• c:a copy表示不改變音頻編碼

添加音軌

將外部音頻加入視頻，比如添加背景音樂或者旁白

#?如果視頻原來有聲音，不會添加成功，所以需要先去除視頻中原來的音頻
#?輸入有兩個文件，ffmpeg會將它們合成為一個文件
ffmpeg?-i?input.aac?-i?input.mp4?output.mp4

截圖

從指定時間開始，連續(xù)對1秒鐘的視頻進(jìn)行截圖

#?從00:00:05s開始，連續(xù)對1秒鐘的視頻進(jìn)行截圖
ffmpeg?-y?-i?input.mp4?-ss?00:00:05?-t?00:00:01?output_%3d.jpg

如果只需要截取一幀

#?從00:00:10s開始截取一幀
ffmpeg?-ss?00:00:10?-i?input?-vframes?1?-q:v?2?output.jpg

參數(shù)說明

• vframes 1 指定只截取一幀
• q:v 2表示輸出圖片的質(zhì)量 一般是1至5之間

分割一個mp4文件到多個小的mp4文件

可以指定開始時間和持續(xù)時間，也可以指定結(jié)束時間

ffmpeg?-ss??-i??-t??-c?copy?

ffmpeg?-ss??-i??-to??-c?copy?

示例：

#?將視頻從0s分割到5s的位置?
ffmpeg?-ss?00:00:00?-i?1.mp4?-c?copy?-t?5?aqgy-1.mp4
#?示例：將一個1分30s的視頻分成4段
ffmpeg?-ss?00:00:00?-i?1.mp4?-c?copy?-t?00:00:22?aqgy-1.mp4
ffmpeg?-ss?00:00:22?-i?1.mp4?-c?copy?-t?00:00:22?aqgy-2.mp4
ffmpeg?-ss?00:00:44?-i?1.mp4?-c?copy?-t?00:00:22?aqgy-3.mp4
ffmpeg?-ss?00:01:06?-i?1.mp4?-c?copy?-t?00:00:22?aqgy-4.mp4

視頻播放器的原理

先說一下播放器是如何播放視頻的，這里的播放器可以是本地的播放器，也可以是瀏覽器中的播放器。

大概流程如下：

解協(xié)議的作用，就是將流媒體協(xié)議的數(shù)據(jù)，解析為標(biāo)準(zhǔn)的相應(yīng)的封裝格式數(shù)據(jù)。流媒體協(xié)議主要包括RTMP,HLS以及HTTP等。比如一個HTTP的視頻鏈接,http://111.229.14.189/file/1.mp4，經(jīng)過解協(xié)議之后，會得到1.mp4封裝格式的視頻

解封裝：解封裝就是將音頻碼流和視頻碼流從1.mp4文件中分離出來。1.MP4文件經(jīng)過解封裝后，會得到編碼格式為h264的視頻壓縮數(shù)據(jù)和編碼格式為aac的音頻壓縮數(shù)據(jù)。

音視頻解碼：將壓縮的音視頻數(shù)據(jù)轉(zhuǎn)化原始的數(shù)據(jù)，視頻的原始數(shù)據(jù)就是一幀幀的圖像，音頻的原始數(shù)據(jù)就是YUM數(shù)據(jù)。

視音頻同步的作用，就是根據(jù)解封裝模塊處理過程中獲取到的參數(shù)信息，同步解碼出來的視頻和音頻數(shù)據(jù)，并將視頻音頻數(shù)據(jù)送至系統(tǒng)的顯卡和聲卡播放出來。

我們在瀏覽器中打開http://111.229.14.189/file/1.mp4，流程大概就是上面的那些。

瀏覽器中音視頻知識

為什么有些視頻播放不了

瀏覽器播放一個視頻的流程上面剛講過，在音視頻解碼階段，因?yàn)闉g覽器支持的解碼器有限，所有有些編碼的視頻碼流瀏覽器無法解碼，流程中斷，所以也就無法播放。

前端開發(fā)的需要記住，視頻編碼為h264，音頻編碼為aac的MP4文件在各大瀏覽器都能播放，因?yàn)閔264編碼格式雖然有版權(quán)，但是可以免費(fèi)使用。

音視頻標(biāo)簽

"1.jpg"?src="1.mp4"?loop?muted>
"1.mp3">

src指定資源地址，poster為視頻指定一張封面圖，controls表示瀏覽器應(yīng)該顯示UI控件（每個瀏覽器樣式不同）

常用屬性

下面是video和audio的通用屬性

常用事件

video和audio通用事件

常用方法

• play() 控制視頻開始播放
• pause() 控制視頻暫停播放

有了上述的屬性、事件及方法，我們就可以做很多事了，比如自定義播放器，使用播放器本地預(yù)覽視頻等。

瀏覽器中實(shí)現(xiàn)視頻播放器的基本思路

整體思路如下：

1. 監(jiān)聽loadedmetadata事件，獲取視頻時長(duration)，真實(shí)寬高(videoWidth,videoHeight)
2. 點(diǎn)擊播放/暫停時，調(diào)用視頻元素的play/pause方法
3. 播放時，監(jiān)聽timeupdate，獲取當(dāng)前播放時間(currentTime)，計算出進(jìn)度條的進(jìn)度
4. 拖動進(jìn)度條，設(shè)置視頻當(dāng)前播放時間,與步驟3相反
5. 視頻初始加載時，顯示loading。即組件初次渲染時，loading屬性默認(rèn)為true,即顯示加載效果，當(dāng)視頻元數(shù)據(jù)加載時，取消loading
6. 視頻卡頓時，顯示loading。該功能的實(shí)現(xiàn)是監(jiān)聽的waiting事件，不卡頓時，取消loading，監(jiān)聽的是canplay事件

音視頻領(lǐng)域的一些學(xué)習(xí)資源推薦

國內(nèi)學(xué)習(xí)音視頻相關(guān)的開發(fā)，繞不過的一個大神是 雷霄驊，大佬已經(jīng)去世了，但是留下的文章永垂不朽。

推薦從這篇文章開始閱讀[總結(jié)]視音頻編解碼技術(shù)零基礎(chǔ)學(xué)習(xí)方法，從這個點(diǎn)開始，遇到跳轉(zhuǎn)的鏈接感興趣的就點(diǎn)過去，由點(diǎn)及面。

國內(nèi)李超的課程還不錯，如果對直播webrtc有需求的，可以查看這個專欄從零打造音視頻直播系統(tǒng) 這個是放在我的服務(wù)器上的，帶寬很低，人多會卡，謹(jǐn)慎訪問。

如果你是小白，可以看下李超的編程必備基礎(chǔ)-音視頻小白系統(tǒng)入門課課程的5、7、8、9、10章，講的是一些必備的理論知識。

如果對ffmpeg感興趣的話，可以看下這個教程，英文的，github點(diǎn)贊6千8，https://github.com/leandromoreira/ffmpeg-libav-tutorial