html5的面試中，大概率會問到的音頻和視頻的那些知識點

言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

學習深入理解HTML5的audio和video。

HTML5視頻概述

在HTML5播放一個視頻，很簡單，只需要一行代碼：

<video src="resources/dadaqianduan.mp4" autoplay></video>

了解多媒體術語

了解視頻文件格式：

Audio Video InterLeaved .avi

Flash Video .flv

MPEG-4 .mp4

Matroska .mkv

Ogg .ogv

音頻和視頻編解碼器

編解碼器可以理解為一些算法代碼，用于處理視頻，音頻或者其元數據的編碼格式。對音頻或視頻文件進行編碼，可使得文件大大縮小，便于在因特網上傳輸。

音頻編解碼器：

MP3，使用ACC音頻

Wav，使用Wav音頻

Ogg，使用OggVorbis音頻

視頻編解碼器：

MP4，使用H.264視頻，AAC音頻

WebM，使用VP8視頻，OggVorbis音頻

Ogg，使用Theora視頻，OggVorbis音頻

多媒體文件格式

audio元素支持的音頻格式MP3,Wav,Ogg；video元素支持的格式MP4,WebM,Ogg。

audio元素是專門用于在網頁中播放網絡音頻的
video元素是專門用于在網頁中播放視頻的

在HTML5中audio和video元素提供的接口包含了一系列的屬性，方法和事件，這些接口可以幫助開發完成對音頻和視頻的操作。

那么如何在頁面中添加音頻和視頻呢？

音頻

<audio src="resources/audio.mp3">
</audio>

視頻

<video src="resources/video.mp4" width="600" height="200">
</video>

使用source元素

因為各種瀏覽器對音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中正常使用，可以提供多個源文件。

<audio src="resources/audio.mp3">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
</audio>

<video src="resources/video.mp4" width="600" height="200" controls>
 <source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
 <source src="movie.mp4" type="video/mp4">
</video>

使用source元素替代了audio或video的標簽屬性src。

src屬性用于指定媒體文件的url地址
type屬性用于指定媒體文件的類型，屬性值為媒體文件的MIME類型，該屬性值還可以通過codes參數指定編碼格式

audio和video特性和屬性

元素的標簽特性

src，源文件特性，用于指定媒體文件的url地址
autoplay，自動播放特性，表示媒體文件加載后自動播放。

<video src="resources/video.mp4" autoplay></video>

controls，控制條特性，表示為視頻或音頻添加自帶的播放控制條。

<video src="resources/video.mp4" controls></video>

loop，循環特性，表示音頻或視頻循環播放。

<video src="resources/video.mp4" controls loop></video>

preload，預加載特性，表示頁面加載完成后如何加載視頻數據。

none表示不進行預加載
metadata表示只加載媒體文件的元數據
auto表示加載全部視頻或音頻，默認值為auto

<video src="resources/video.mp4" controls preload="auto"></video>

poster是video元素獨有的特性，替代內容屬性，用于指定一副替代圖片的url地址，當視頻不可以用時，會顯示該替代圖片。

<video src="resources/video.mp4" controls poster="images/none.jpg"</video>

width和height，video元素獨有的特性，用于指定視頻的寬度和高度

<video src="resources/video.mp4" width="600" height="200" controls></video>

接口屬性

currentSrc，只讀，獲取當前正在播放或已加載的媒體文件的url地址
videoWidth，只讀，video元素特有屬性，獲取視頻原始的寬度
videoHeight，只讀，video元素特有屬性，獲取視頻原始的高度
currentTime，獲取或設置當前媒體播放位置的時間點
startTime，只讀，獲取當前媒體播放的開始時間
duration，只讀，獲取整個媒體文件的播放時長
volume，獲取或設置媒體文件播放時的音量，取值范圍在0.0到0.1之間
muted，獲取或設置媒體文件播放時是否靜音。true表示靜音，false表示消除靜音
ended，只讀，如果媒體文件已經播放完畢則返回true，否則返回false
error，只讀，讀取媒體文件的錯誤代碼
played，只讀，獲取已播放媒體的TimesRanges對象，該對象內容包括已播放部分的開始時間和結束時間。
paused，只讀，如果媒體文件當前是暫停或未播放則返回true，否則返回false
seeking，只讀，獲取瀏覽器是否正在請求媒體數據
seekable，只讀，獲取媒體資源已請求的TimesRanges對象，該對象內容包括已請求部分的開始時間和結束時間
networkState，只讀，獲取媒體資源的加載狀態
buffered，只讀，獲取本地緩存的媒體數據的TimesRanges對象
readyState，只讀，獲取當前媒體播放的就緒狀態
playbackRate，獲取或設置媒體當前的播放速率
defaultPlaybackRate，獲取或設置媒體默認的播放速率

視頻播放的快進

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻播放時的快進</title>
<script type="text/javascript">
function Forward() {
 var el = document.getElementById("myPlayer");
 var time = el.currentTime;
 el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快進" onclick="Forward()"/>
</body>
</html>

audio和video接口方法

接口方法

load()，加載媒體文件，為播放做準備。
play()，播放媒體文件。
pause()，暫停播放媒體文件。
canPlayType()，測試瀏覽器是否支持指定的媒體類型。

代碼示例使用接口：

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放與暫停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
 videoEl.play();
}
function Pause() {
 videoEl.pause();
}
window.onload = function(){
 videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
 <source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暫停" onclick="Pause()"/>
</body>
</html>

audio和video事件

捕獲事件的方式

捕獲事件有兩種方法：一種是添加事件句柄，一種是監聽。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>

// 監聽方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);

接口事件

play，當執行方法play()時觸發
playing，正在播放時觸發
pause，當執行了方法pause()時觸發
timeupdate，當播放位置被改變時觸發
ended，當播放結束后停止播放時觸發
waiting，在等待加載下一幀時觸發
ratechange，在當前播放速率改變時觸發
volumechange，在音量改變時觸發
canplay，以當前播放速率需要緩沖時觸發
canplaythrough，以當前播放速率不需要緩沖時觸發
durationchange，當播放時長改變時觸發
loadstart，當瀏覽器開始在網上尋找數據時觸發
progress，當瀏覽器正在獲取媒體文件時觸發
suspend，當瀏覽器暫停獲取媒體文件，且文件獲取并不是正常結束時觸發
abort，當終止獲取媒體數據時觸發
error，在獲取媒體過程中出錯時觸發
emptied，當所在網絡變為初始化狀態時觸發
stalled，在瀏覽器嘗試獲取媒體數據失敗時觸發
seeking，在瀏覽器正在請求數據時觸發
seeded，在瀏覽器停止請求數據時觸發

定義全局的視頻對象

代碼如下：

<script type="text/javascript">
// 定義全局視頻對象
var videoEl = null;
// 網頁加載完畢后，讀取視頻對象
window.addEventListener("load", function() {
 videoEl = document.getElementById("myPlayer")
});
</script>

添加進度顯示功能

代碼如下：

<script type="text/javascript">
function Progress() {
 var el = document.getElementById("progress");
 el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
 document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}

function s2time(s) {
 var m = parseFloat(s/60).toFixed(0);
 s = parseFloat(s%60).toFixed(0);
 return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)

添加靜音和調節音量的功能

消除靜音videoEl.muted=false；靜音效果videoEl.muted=true；videoEl.volume=e.value;修改音量的值。

添加慢進和快進功能

H5 視頻兼容性處理總結：跨平臺視頻播放解決方案

**引言：H5視頻的重要性及挑戰**

隨著HTML5標準的發展和完善， `<video>` 標簽已經成為現代Web開發中實現內嵌視頻播放的重要手段。然而，不同瀏覽器和設備對HTML5視頻的支持程度存在差異，這就要求開發者掌握一套行之有效的視頻兼容性處理策略，確保視頻在多種環境下流暢播放。本文將深入探討H5視頻兼容性的關鍵問題，并分享實戰經驗與代碼示例。

---

### **一、視頻編碼格式與容器的選擇**

**標題：了解MIME類型與視頻格式兼容性**

為了保證視頻在所有瀏覽器中都能正確播放，你需要考慮視頻編碼格式（如H.264、VP8/VP9）以及封裝容器（MP4、WebM、Ogg）的兼容性。

```html

<p>您的瀏覽器不支持內嵌視頻標簽，請升級或更換瀏覽器。</p>

</video>

```

在上述代碼中，我們按照瀏覽器對視頻格式的支持優先級，依次提供了MP4、WebM和Ogg格式的視頻源文件。

---

### **二、自動檢測與適配**

**標題：JavaScript輔助實現智能切換**

通過JavaScript動態檢測瀏覽器對不同視頻格式的支持情況，可以自動調整播放源。

```javascript

var videoElement = document.querySelector('video');

var sources = [

{src: 'movie.mp4', type: 'video/mp4'},

{src: 'movie.webm', type: 'video/webm'},

{src: 'movie.ogg', type: 'video/ogg'}

];

sources.forEach(function(source) {

var sourceElement = document.createElement('source');

sourceElement.src = source.src;

sourceElement.type = source.type;

videoElement.appendChild(sourceElement);

});

// 檢測是否能播放第一個源，若不能則移除并嘗試下一個

function tryNextSource(video) {

if (video.paused && video.error) {

var nextSource = video.getElementsByTagName('source')[0];

if (nextSource) {

video.removeChild(nextSource);

tryNextSource(video);

}

videoElement.addEventListener('error', function() {

tryNextSource(this);

}, true);

// 開始播放視頻

videoElement.load();

videoElement.play();

```

這段代碼會在遇到無法播放的視頻源時，自動切換至下一個可用的源。

---

### **三、響應式設計與全屏控制**

**標題：適應不同屏幕尺寸與設備特性**

針對移動端設備和桌面端的不同需求，視頻元素應當具有響應式布局，并且提供全屏播放的功能。

```html

</video>

// 全屏控制

var video = document.querySelector('video');

if (video.requestFullscreen) {

video.requestFullscreen();

} else if (video.mozRequestFullScreen) { /* Firefox */

video.mozRequestFullScreen();

} else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */

video.webkitRequestFullscreen();

}

</script>

```

這里通過CSS設置寬度為100%，高度自適應以實現響應式布局，并利用瀏覽器的Fullscreen API來控制視頻全屏播放。

---

### **四、視頻加載優化與錯誤處理**

**標題：提高加載速度與用戶體驗**

對于大體積視頻，可采用預加載或緩沖技術改善用戶體驗。

```html

</video>

// 監聽視頻加載事件

video.addEventListener('loadedmetadata', function() {

console.log('視頻元數據已加載，可以獲取時長等信息');

});

video.addEventListener('canplay', function() {

console.log('視頻可以開始播放，但可能需要緩沖');

});

video.addEventListener('canplaythrough', function() {

console.log('視頻可以流暢播放，無需額外緩沖');

});

// 錯誤處理

video.addEventListener('error', function(event) {

console.error('視頻加載失敗:', event.target.error.code);

});

</script>

```

通過設置preload屬性為"auto"可提前加載視頻資源，同時監聽不同的視頻加載狀態事件，以便更好地處理加載錯誤和提升用戶體驗。

---

**結語：**

通過對H5視頻兼容性處理的深入探討，我們已了解了視頻編碼格式選擇、智能切換源、響應式設計、全屏控制以及加載優化等方面的關鍵技術。在實踐中靈活運用這些策略，將有助于構建出更加穩定、高性能、跨平臺的Web視頻播放環境。持續關注瀏覽器發展趨勢，及時更新視頻處理方案，方能在Web前端開發領域始終保持領先優勢。

言

前不久抽空對目前比較火的視頻直播，做了下研究與探索，了解其整體實現流程，以及探討移動端HTML5直播可行性方案。

發現目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以借助 video.js 采用RTMP），PC端則以 RTMP 為主實時性較好，接下來將圍繞這兩種視頻流協議來展開H5直播主題分享。

一、視頻流協議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個基于 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。

HLS 協議基于 HTTP，而一個提供 HLS 的服務器需要做兩件事：

編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件，并生成一個 .m3u8 的純文本索引文件；瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火墻影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩沖，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。

對于支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

注意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video

標簽無法播放 m3u8 格式，可直接采用網上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

程序猿的生活：web前端全棧資料粉絲福利（面試題、視頻、資料筆記，進階路線）zhuanlan.zhihu.com/p/136454207

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。

雖然無法在iOS的H5頁面播放，但是對于iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。瀏覽器端，HTML5 video

標簽無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>

3. 視頻流協議HLS與RTMP對比

二、直播形式

目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：

① 背景視頻層

② 關注、評論模塊

③ 點贊動畫

而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分為：

① 底部視頻背景使用video視頻標簽實現播放

② 關注、評論模塊利用 WebScoket 來實時發送和接收新的消息通過DOM 和 CSS3 實現

③ 點贊利用 CSS3 動畫

了解完直播形式之后，接下來整體了解直播流程。

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

三、直播整體流程

直播整體流程大致可分為：

視頻采集端：可以是電腦上的音視頻輸入設備、或手機端的攝像頭、或麥克風，目前以移動端手機視頻為主。

直播流視頻服務端：一臺Nginx服務器，采集視頻錄制端傳輸的視頻流(H264/ACC編碼)，由服務器端進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。

視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標簽等，目前還是以手機端的native播放器為主。

（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

四、H5 錄制視頻

對于H5視頻錄制，可以使用強大的 webRTC （Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 Chrome 上支持較好，移動端支持不太理想。

使用 webRTC 錄制視頻基本流程

① 調用 window.navigator.webkitGetUserMedia()

獲取用戶的PC攝像頭視頻數據。

② 將獲取到視頻流數據轉換成 window.webkitRTCPeerConnection

(一種視頻流數據格式)。

③ 利用 WebScoket

將視頻流數據傳輸到服務端。

注意：

雖然Google一直在推WebRTC，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,Android）來實現,效果會好一些。

WebRTC支持度

iOS原生應用調用攝像頭錄制視頻流程

① 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數據流。

② 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現對音視頻的編碼。

③ 對編碼后的音、視頻數據進行組裝封包。

④ 建立RTMP連接并上推到服務端。

五、搭建Nginx+Rtmp直播流服務

安裝nginx、nginx-rtmp-module

① 先clone nginx項目到本地：

brew tap homebrew/nginx

② 執行安裝nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http節點之前添加 rtmp 的配置內容：

② 在http中添加 hls 的配置

3. 重啟nginx服務

重啟nginx服務，瀏覽器中輸入 http://localhost:8080，是否出現歡迎界面確定nginx重啟成功。

nginx -s reload

六、直播流轉換格式、編碼推流

當服務器端接收到采集視頻錄制端傳輸過來的視頻流時，需要對其進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。鑒于 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優先選用FFmpeg進行轉換格式、編碼推流。

1.安裝 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

視頻文件地址：/Users/gao/Desktop/video/test.mp4

推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意：

當我們進行推流之后，可以安裝VLC、ffplay（支持rtmp協議的視頻播放器）本地拉流進行演示

3.FFmpeg推流命令

① 視頻文件進行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流攝像頭＋桌面+麥克風錄制進行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令，請參考：

FFmpeg處理RTMP流媒體的命令大全

FFmpeg常用推流命令

七、H5 直播視頻播放

移動端iOS和 Android 都天然支持HLS協議，做好視頻采集端、視頻流推流服務之后，便可以直接在H5頁面配置 video 標簽播放直播視頻。

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

八、總結

本文從視頻采集上傳，服務器處理視頻推流，以及H5頁面播放直播視頻一整套流程,具體闡述了直播實現原理，實現過程中會遇到很多性能優化問題。

① H5 HLS 限制必須是H264+AAC編碼。

② H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可盡量做到 DNS 緩存等。

③ H5 直播為了達到更好的實時互動，也可以采用RTMP協議，通過video.js 實現播放。

原文 https://zhuanlan.zhihu.com/p/146323842

在線咨詢

上一篇：jQuery Mobile CSS 類
下一篇：HTML教程（看完這篇就夠了）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5的面試中，大概率會問到的音頻和視頻的那些知識點

言

HTML5視頻概述

了解多媒體術語

多媒體文件格式

使用source元素

audio和video特性和屬性

視頻播放的快進

audio和video接口方法

audio和video事件

言

一、視頻流協議HLS與RTMP

二、直播形式

三、直播整體流程

四、H5 錄制視頻

五、搭建Nginx+Rtmp直播流服務

六、直播流轉換格式、編碼推流

七、H5 直播視頻播放

八、總結

您的項目需求