整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5中的video標(biāo)簽用于播放視頻文件的，在video標(biāo)簽中我們可以設(shè)置窗口的寬高，視頻的自動(dòng)播放，循環(huán)播放以及視頻的封面圖片等等
HTML5是下一代HTML，新增了許多新的標(biāo)簽，這些標(biāo)簽實(shí)現(xiàn)了許多新的功能。并且還減少了對(duì)外部插件的要求同時(shí)也可以更好的處理錯(cuò)誤。比如HTML5中的video標(biāo)簽就可以很好的實(shí)現(xiàn)了在頁(yè)面上播放視頻的效果。接下來(lái)在文章中將為大家具體介紹如何使用video標(biāo)簽，具有一定的參考作用，希望對(duì)大家有所幫助
【推薦課程：HTML5教程】
HTML5 video標(biāo)簽的詳細(xì)用法
用于播放視頻文件，比如電影或其它視頻流。可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣做的好處是一些低版本的瀏覽器就可以顯示出不支持該標(biāo)簽的信息
例：
<video src="movie01.mp4" controls></video>
定義寬高
我們可以給這個(gè)視頻自定義寬高來(lái)改變它的窗口大小
<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>
效果圖：
自動(dòng)播放
我們可以通過(guò)設(shè)置屬性來(lái)讓視頻是否開啟自動(dòng)播放
（1）使用autoplay屬性可以讓瀏覽器加載完后視頻文件后立即播放
<video width="400" height="300" controls autoplay>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
我們還可以在自動(dòng)播放時(shí)設(shè)置muted狀態(tài)，這樣做的目的是當(dāng)視頻自動(dòng)播放時(shí)會(huì)靜音，而且我們還可以通過(guò)點(diǎn)擊播放器的揚(yáng)聲器來(lái)開啟聲音
<video width="400" height="300" controls autoplay muted>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
效果圖：
循環(huán)播放
我們可以使用loop屬性讓視頻播放結(jié)束時(shí)，再?gòu)念^開始循環(huán)播放。代碼如下所示
<video width="400" height="300" controls loop>
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
預(yù)加載媒體文件
設(shè)置preload屬性中的不同屬性值，來(lái)告訴瀏覽器應(yīng)該怎樣加載一個(gè)媒體文件：
auto：表示讓瀏覽器自動(dòng)下載整個(gè)文件
none：表示讓瀏覽器不必預(yù)先下載文件
metadata：表示讓瀏覽器先獲取視頻文件開頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時(shí)長(zhǎng)，第一幀圖像等）
<video width="400" height="300" controls preload="auto">
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
設(shè)置視頻的封面圖片
通過(guò)poster屬性可以設(shè)置視頻的封面圖片，瀏覽器在下面三種情況下會(huì)使用這個(gè)圖片：
（1）視頻第一幀未加載完畢
（2）把preload屬性設(shè)置為none
（3）沒(méi)有找到指定的視頻文件
<video width="400" height="300" controls preload="none" poster="images/5.jpg">
<source src="movie01.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
效果圖：
總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望通過(guò)這篇文章可以幫助大家學(xué)會(huì)去使用video標(biāo)簽。
以上就是HTML5中video標(biāo)簽如何使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注其它相關(guān)文章！
更多技巧請(qǐng)《轉(zhuǎn)發(fā) + 關(guān)注》哦！
html5 播放器默認(rèn)是可以下載視頻的，在默認(rèn)的控制器（給 video 標(biāo)簽添加 controls 屬性開啟）上會(huì)有下載菜單， 即使不使用默認(rèn)提示的控制器，右鍵彈出的上下文菜單中也會(huì)有保存視頻的選項(xiàng)。
通過(guò) controlslist 屬性可以設(shè)置瀏覽器提供的控制器，不讓下載菜單顯示出來(lái)。controlslist 還可以設(shè)置不顯示全屏等功能同，但是瀏覽器 支持較差，尤其是移動(dòng)端瀏覽器。
<video src="test.mp4" playsinline autoplay="false" controls controlslist="nodownload"></video>將 controlslist 的值設(shè)置為 nodownload ，就不會(huì)出現(xiàn)下載菜單了，不過(guò) PC 上點(diǎn)擊右鍵的上下文菜單的保存視頻選項(xiàng)仍然有用，還是很容易被下載。
如果是通過(guò)自定義樣式來(lái)控制播放暫時(shí)等操作的控制條，還可以將 video 禁右鍵或者蒙上一層 div 來(lái)阻止彈出上下文菜單，防止下載。
雖然通過(guò) controlslist 可以防止下載，但是有些瀏覽器不支持，很多移動(dòng)端的瀏覽器會(huì)直接接管播放器。 如果用戶懂一點(diǎn)技術(shù)，捕獲視頻文件的鏈接，就可以直接打開鏈接進(jìn)行下載了。 我們可以利用 Media Source Extensions API 來(lái)給文件做加密，這套技術(shù)本來(lái)是用于擴(kuò)展的，通過(guò)擴(kuò)展可以兼容更多 的視頻格式，可以認(rèn)為是前端的一套自定義轉(zhuǎn)碼的接口，將文件實(shí)時(shí)轉(zhuǎn)碼成瀏覽器支持的格式。
服務(wù)器端做好視頻的加密，將原視頻文件通過(guò)對(duì)稱性加密生成一個(gè)加密新文件，客戶端將加密的新文件加載后進(jìn)行解密， 然后將解密后的原文件內(nèi)容通過(guò) MediaSource 推送，完成視頻的播放。
<canvas height="240" width="320" id="player" onclick="playOrPause()"></canvas>const video = document.getElementById('videoId')
// 視頻編碼譯碼器，使用工具 mp4info 可以查看
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', e => {
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
// 請(qǐng)求加密文件，然后解密添加到 sourceBuffer，也可以將文件裁切成多個(gè)部分,分多次加載
fetch('./chunk')
.then(async resp => {
const blob = await resp.blob()
const buf = await blob.arrayBuffer()
sourceBuffer.addEventListener('updateend', () => {
// 如果是多個(gè)文件塊，可以在判定已經(jīng)添加完所有塊后結(jié)束（一般會(huì)搞個(gè)塊列表做比對(duì)的）
mediaSource.endOfStream()
})
// decode 是自定義的解碼函數(shù)，將請(qǐng)求到的加密文件 chunk 內(nèi)容解密成為真正的 mp4 文件
// ，要與前面的 mimeCodec 對(duì)應(yīng)，否則會(huì)有錯(cuò)誤
// 這個(gè)示例省略了很多錯(cuò)誤處理，要處理錯(cuò)誤需要對(duì) mediaSource 和 sourceBuffer 做 error 事件處理
sourceBuffer.appendBuffer(decode(buf))
console.log('appendBuffer after')
})
.catch(console.error)
})這樣處理后，通過(guò)控制臺(tái) network 查看到的是加密文件的請(qǐng)求地址，拿到后也不能播放，查看 video 標(biāo)簽源地址是 生成的臨時(shí)地址，也無(wú)法直接打開。并且，通過(guò) Media Source Extensions API 還可以實(shí)現(xiàn)視頻分塊做按需加載。 其實(shí) video 標(biāo)簽播放視頻也會(huì)自動(dòng)按需請(qǐng)求內(nèi)容（僅部分瀏覽器），需要服務(wù)器做好對(duì) Range 消息頭的支持，根據(jù)參數(shù)來(lái)返回部分文件內(nèi)容。 不過(guò) Media Source Extensions API 的兼容性不是很好，ie 和 safari 都是不支持的， 新版本 mac 上的 safari 不知道是否能支持。經(jīng)過(guò)測(cè)試，小部分移動(dòng)端瀏覽器也不支持，無(wú)法顯示出視頻，大部分移動(dòng)端瀏覽都可以支持的很好。 有些網(wǎng)站的播放器做了兼容，對(duì)于不支持 MSE 的瀏覽器仍然使用 video 標(biāo)簽播放原 mp4 文件。
基于 canvas 也是一種方案，好處是不會(huì)被瀏覽器識(shí)別成視頻，也就不會(huì)被接管。很多不太規(guī)范的移動(dòng)端瀏覽器 都是直接接管視頻播放器，自定義的播放器樣式完全沒(méi)用，不會(huì)被顯示出來(lái)，使用 canvas 就可以解決這個(gè)問(wèn)題。
const canvas = document.getElementById('player')
/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext('2d')
const video = document.createElement('video')
video.addEventListener('canplay', e => {
// 渲染封面
this.renderCover()
})
fetch('./test.mp4')
.then(async resp => {
const blob = await resp.blob()
video.src = URL.createObjectURL(blob)
})
.catch(console.error)
function playOrPause() {
if (video.ended) {
return
}
if (video.paused) {
video.play()
startRender()
} else {
video.pause()
}
}
function startRender() {
requestAnimationFrame(() => {
renderVideo()
if (!video.paused && !video.ended) {
startRender()
}
})
}
function renderCover() {
ctx.clearRect(0, 0, 320, 240)
ctx.fillStyle = '#000000'
ctx.fillRect(0, 0, 320, 240)
ctx.font = '40px Arial'
ctx.fillStyle = '#ffffff'
const text = '點(diǎn)擊播放'
const m = ctx.measureText(text)
ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
}
function renderVideo() {
ctx.clearRect(0, 0, 320, 240)
ctx.drawImage(video, 0, 0, 320, 240)
if (video.paused) {
ctx.font = '40px Arial'
ctx.fillStyle = '#ffffff'
const text = '已暫停'
const m = ctx.measureText(text)
ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
}
}以上僅僅是非常簡(jiǎn)單的 demo，這個(gè)方案真要完善工作量還是挺大的，除操作條和字幕功能外，視頻全屏還需要做一定的重新渲染處理， 有些瀏覽器還不支持全屏 API (requestFullscreen)，導(dǎo)致沒(méi)有辦法將視頻全屏展示。 即便如此，也無(wú)法保證百分百不能被下載， 有些瀏覽器還有媒體嗅探功能，當(dāng)請(qǐng)求了媒體文件后，就會(huì)被檢測(cè)到，提示用戶檢測(cè)到有媒體文件， 詢問(wèn)用戶是否要下載。
經(jīng)過(guò)我對(duì)某個(gè)移動(dòng)端瀏覽器的測(cè)試，改 content-type 和后綴名也不行，只要請(qǐng)求的是視頻文件就會(huì)被檢測(cè)到。 只有把文件加密，請(qǐng)求的是加密文件，不是真正的視頻文件，這樣就不能被檢測(cè)到了，然后客戶端解密后再播放。
實(shí)測(cè)這個(gè)方案兼容性也不是很好，部分移動(dòng)端瀏覽器會(huì)渲染不出來(lái)視頻內(nèi)容，有些還會(huì)出現(xiàn)卡頓和圖像錯(cuò)亂。不過(guò)微信內(nèi)置 以及火狐等一些較為先進(jìn)的移動(dòng)端瀏覽器支持的都比較好。不過(guò)，使用了 canvas 方案就沒(méi)有一些原生功能的支持的，如 小窗播放（畫中畫模式）。
經(jīng)過(guò)我的測(cè)試，對(duì) MSE 和 canvas 方案無(wú)法支持的瀏覽器，恰恰是一些以下載視頻為特色的移動(dòng)端瀏覽器， 這些瀏覽器內(nèi)核可能也比較舊，或者是因?yàn)樾薷膬?nèi)核導(dǎo)致的不兼容，不考慮這些瀏覽器 MSE 應(yīng)該是最佳方案， 因?yàn)?MSE 可以實(shí)現(xiàn)按需漸近加載視頻。
由于視頻本身就非常耗資源，即時(shí)加密對(duì)服務(wù)器要求高，最好是先加密好。 加密必須是對(duì)稱性的，能加密也能解密，通過(guò)破解前端代碼掌握解密方法，仍然有辦法解開視頻內(nèi)容。 如果視頻是提前加密好再存儲(chǔ)的，也不好去搞動(dòng)態(tài)密鑰。
html5 視頻播放器想要下載并做好兼容是非常困難的，基本上不太可能。有些對(duì)版權(quán)保護(hù)比較嚴(yán)格的網(wǎng)站，采取了 只能使用客戶端看視頻的方案，體驗(yàn)上就差一些了。比如 cctalk 這個(gè)平臺(tái)，視頻作者可以設(shè)置保護(hù)，對(duì)于需要保護(hù)的 視頻只能通過(guò)客戶端觀看，其它的視頻仍然可以網(wǎng)頁(yè)上直接播放。
前不久抽空對(duì)目前比較火的視頻直播，做了下研究與探索，了解其整體實(shí)現(xiàn)流程，以及探討移動(dòng)端HTML5直播可行性方案。
發(fā)現(xiàn)目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動(dòng) WEB 端目前以 HLS 為主（HLS存在延遲性問(wèn)題，也可以借助 video.js 采用RTMP），PC端則以 RTMP 為主實(shí)時(shí)性較好，接下來(lái)將圍繞這兩種視頻流協(xié)議來(lái)展開H5直播主題分享。
1. HTTP Live Streaming
HTTP Live Streaming（簡(jiǎn)稱 HLS）是一個(gè)基于 HTTP 的視頻流協(xié)議，由 Apple 公司實(shí)現(xiàn)，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對(duì) HLS 的支持。一些常見(jiàn)的客戶端如：MPlayerX、VLC 也都支持 HLS 協(xié)議。
HLS 協(xié)議基于 HTTP，而一個(gè)提供 HLS 的服務(wù)器需要做兩件事：
編碼：以 H.263 格式對(duì)圖像進(jìn)行編碼，以 MP3 或者 HE-AAC 對(duì)聲音進(jìn)行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把編碼好的 TS 文件等長(zhǎng)切分成后綴為 ts 的小文件，并生成一個(gè) .m3u8 的純文本索引文件；瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡(jiǎn)單的認(rèn)為 m3u8 就是包含多個(gè) ts 文件的播放列表。播放器按順序逐個(gè)播放，全部放完再請(qǐng)求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續(xù)播，周而復(fù)始。整個(gè)直播過(guò)程就是依靠一個(gè)不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動(dòng)態(tài)更新，ts 可以走 CDN。一個(gè)典型的 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 協(xié)議本質(zhì)還是一個(gè)個(gè)的 HTTP 請(qǐng)求 / 響應(yīng)，所以適應(yīng)性很好，不會(huì)受到防火墻影響。但它也有一個(gè)致命的弱點(diǎn)：延遲現(xiàn)象非常明顯。如果每個(gè) ts 按照 5 秒來(lái)切分，一個(gè) m3u8 放 6 個(gè) ts 索引，那么至少就會(huì)帶來(lái) 30 秒的延遲。如果減少每個(gè) ts 的長(zhǎng)度，減少 m3u8 中的索引數(shù)，延時(shí)確實(shí)會(huì)減少，但會(huì)帶來(lái)更頻繁的緩沖，對(duì)服務(wù)端的請(qǐng)求壓力也會(huì)成倍增加。所以只能根據(jù)實(shí)際情況找到一個(gè)折中的點(diǎn)。
對(duì)于支持 HLS 的瀏覽器來(lái)說(shuō)，直接這樣寫就能播放了：
<video src=”./bipbopall.m3u8″ height=”300″ width=”400″ preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>注意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video
標(biāo)簽無(wú)法播放 m3u8 格式，可直接采用網(wǎng)上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。
程序猿的生活：web前端全棧資料粉絲福利（面試題、視頻、資料筆記，進(jìn)階路線）zhuanlan.zhihu.com/p/136454207
2. Real Time Messaging Protocol
Real Time Messaging Protocol（簡(jiǎn)稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務(wù)如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實(shí)現(xiàn)播放器。它的實(shí)時(shí)性非常好，延遲很小，但無(wú)法支持移動(dòng)端 WEB 播放是它的硬傷。
雖然無(wú)法在iOS的H5頁(yè)面播放，但是對(duì)于iOS原生應(yīng)用是可以自己寫解碼去解析的, RTMP 延遲低、實(shí)時(shí)性較好。瀏覽器端，HTML5 video
標(biāo)簽無(wú)法播放 RTMP 協(xié)議的視頻，可以通過(guò) video.js 來(lái)實(shí)現(xiàn)。
<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=“l(fā)oop” 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. 視頻流協(xié)議HLS與RTMP對(duì)比
目前直播展示形式，通常以YY直播、映客直播這種頁(yè)面居多，可以看到其結(jié)構(gòu)可以分成三層：
① 背景視頻層
② 關(guān)注、評(píng)論模塊
③ 點(diǎn)贊動(dòng)畫
而現(xiàn)行H5類似直播頁(yè)面，實(shí)現(xiàn)技術(shù)難點(diǎn)不大，其可以通過(guò)實(shí)現(xiàn)方式分為：
① 底部視頻背景使用video視頻標(biāo)簽實(shí)現(xiàn)播放
② 關(guān)注、評(píng)論模塊利用 WebScoket 來(lái)實(shí)時(shí)發(fā)送和接收新的消息通過(guò)DOM 和 CSS3 實(shí)現(xiàn)
③ 點(diǎn)贊利用 CSS3 動(dòng)畫
了解完直播形式之后，接下來(lái)整體了解直播流程。
相關(guān)學(xué)習(xí)資料推薦，點(diǎn)擊下方鏈接免費(fèi)報(bào)名，先碼住不迷路~】
音視頻免費(fèi)學(xué)習(xí)地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開發(fā)
【免費(fèi)分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點(diǎn)擊788280672加群免費(fèi)領(lǐng)取~
直播整體流程大致可分為：
視頻采集端：可以是電腦上的音視頻輸入設(shè)備、或手機(jī)端的攝像頭、或麥克風(fēng)，目前以移動(dòng)端手機(jī)視頻為主。
直播流視頻服務(wù)端：一臺(tái)Nginx服務(wù)器，采集視頻錄制端傳輸?shù)囊曨l流(H264/ACC編碼)，由服務(wù)器端進(jìn)行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。
視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機(jī)端的native播放器，還有就是 H5 的video標(biāo)簽等，目前還是以手機(jī)端的native播放器為主。
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)?。?/span>
對(duì)于H5視頻錄制，可以使用強(qiáng)大的 webRTC （Web Real-Time Communication）是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的技術(shù)，缺點(diǎn)是只在 PC 的 Chrome 上支持較好，移動(dòng)端支持不太理想。
使用 webRTC 錄制視頻基本流程
① 調(diào)用 window.navigator.webkitGetUserMedia()
獲取用戶的PC攝像頭視頻數(shù)據(jù)。
② 將獲取到視頻流數(shù)據(jù)轉(zhuǎn)換成 window.webkitRTCPeerConnection
(一種視頻流數(shù)據(jù)格式)。
③ 利用 WebScoket
將視頻流數(shù)據(jù)傳輸?shù)椒?wù)端。
注意：
雖然Google一直在推WebRTC，目前已有不少成型的產(chǎn)品出現(xiàn)，但是大部分移動(dòng)端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,Android）來(lái)實(shí)現(xiàn),效果會(huì)好一些。
WebRTC支持度
WebRTC支持度
iOS原生應(yīng)用調(diào)用攝像頭錄制視頻流程
① 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流。
② 對(duì)視頻進(jìn)行H264編碼，對(duì)音頻進(jìn)行AAC編碼，在iOS中分別有已經(jīng)封裝好的編碼庫(kù)（x264編碼、faac編碼、ffmpeg編碼）來(lái)實(shí)現(xiàn)對(duì)音視頻的編碼。
③ 對(duì)編碼后的音、視頻數(shù)據(jù)進(jìn)行組裝封包。
④ 建立RTMP連接并上推到服務(wù)端。
安裝nginx、nginx-rtmp-module
① 先clone nginx項(xiàng)目到本地：
brew tap homebrew/nginx
② 執(zhí)行安裝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節(jié)點(diǎn)之前添加 rtmp 的配置內(nèi)容：
② 在http中添加 hls 的配置
3. 重啟nginx服務(wù)
重啟nginx服務(wù)，瀏覽器中輸入 http://localhost:8080，是否出現(xiàn)歡迎界面確定nginx重啟成功。
nginx -s reload
當(dāng)服務(wù)器端接收到采集視頻錄制端傳輸過(guò)來(lái)的視頻流時(shí)，需要對(duì)其進(jìn)行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見(jiàn)編碼庫(kù)方案，如x264編碼、faac編碼、ffmpeg編碼等。鑒于 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優(yōu)先選用FFmpeg進(jìn)行轉(zhuǎn)換格式、編碼推流。
1.安裝 FFmpeg 工具
brew install ffmpeg
2.推流MP4文件
視頻文件地址：/Users/gao/Desktop/video/test.mp4
推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home
//RTMP 協(xié)議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協(xié)議流
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注意：
當(dāng)我們進(jìn)行推流之后，可以安裝VLC、ffplay（支持rtmp協(xié)議的視頻播放器）本地拉流進(jìn)行演示
3.FFmpeg推流命令
① 視頻文件進(jìn)行直播
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② 推流攝像頭＋桌面+麥克風(fēng)錄制進(jìn)行直播
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更多命令，請(qǐng)參考：
FFmpeg處理RTMP流媒體的命令大全
FFmpeg常用推流命令
移動(dòng)端iOS和 Android 都天然支持HLS協(xié)議，做好視頻采集端、視頻流推流服務(wù)之后，便可以直接在H5頁(yè)面配置 video 標(biāo)簽播放直播視頻。
<video controls preload=“auto” autoplay=“autoplay” loop=“l(fā)oop” 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>本文從視頻采集上傳，服務(wù)器處理視頻推流，以及H5頁(yè)面播放直播視頻一整套流程,具體闡述了直播實(shí)現(xiàn)原理，實(shí)現(xiàn)過(guò)程中會(huì)遇到很多性能優(yōu)化問(wèn)題。
① H5 HLS 限制必須是H264+AAC編碼。
② H5 HLS 播放卡頓問(wèn)題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可盡量做到 DNS 緩存等。
③ H5 直播為了達(dá)到更好的實(shí)時(shí)互動(dòng)，也可以采用RTMP協(xié)議，通過(guò)video.js 實(shí)現(xiàn)播放。
原文 https://zhuanlan.zhihu.com/p/146323842
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
