有的，在瀏覽器上播放m3u8的視頻地址有兩種方式：
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出社旗免費(fèi)做網(wǎng)站回饋大家。
一、html的video標(biāo)簽的方式，這種方式播放很簡(jiǎn)單:
!DOCTYPE hmtl
html
head
titlethe5fire m3u8 test/title
/head
body
video controls autoplay
source src="../v1d30/posts/2014/barcelona/barcelona.m3u8"
/video
/body
/html
二、通過(guò)開(kāi)源的swfobject.js以及兩個(gè)flash組件：OSMF和HLSProvider來(lái)播放，代碼如下：
!DOCTYPE html
html
head
titlethe5fire m3u8 test/title
script src="../staticfile/swfobject.js"/script
/head
body
div id="player"
/div
script
var flashvars = {
// M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
// escaped it for urls with ampersands
src: escape(""),
// url to OSMF HLS Plugin
plugin_m3u8: "",
};
var params = {
// self-explained parameters
allowFullScreen: true,
allowScriptAccess: "always",
bgcolor: "#000000"
};
var attrs = {
name: "player"
};
swfobject.embedSWF(
// url to SMP player
"",
// div id where player will be place
"player",
// width, height
"800", "485",
// minimum flash player version required
"10.2",
// other parameters
null, flashvars, params, attrs
);
/script
/body
/html
通過(guò)嵌入以上代碼就可以播m3u8了。
html5是網(wǎng)頁(yè)代碼的標(biāo)準(zhǔn)，跟視頻傳輸協(xié)議沒(méi)一分錢(qián)的關(guān)系。
html5支持的視頻格式是H.264，html5之前的網(wǎng)頁(yè)代碼是不支持視頻的。
網(wǎng)頁(yè)上能看到視頻是因?yàn)闉g覽器安裝了插件，比如flashplayer、Windows Media Player、RealPlayer、快播、百度影音等。
用什么傳輸協(xié)議是看插件支持什么協(xié)議。
rtsp流在主流瀏覽器并不支持直接播放。比如大華的視頻流：rtsp://admin:123456@
192.168.10.129/cam/realmonitor?channel=1subtype=0，用vlc可以直接播放。但在瀏覽器會(huì)報(bào)ERR_UNKNOWN_URL_SCHEME。那如何在瀏覽器中播放呢。
以下列出幾種方案。
1、安裝插件（chrome最新版基本都不支持）
類(lèi)如：kurento，vlc插件（谷歌瀏覽器版本41以下),vgx插件(不支持高版本，chrome72.0版本可用)等。
2、安裝軟件（中間件，基本都付費(fèi)）
類(lèi)如：Appemit（調(diào)用vlc插件播放rtsp），可以免安裝的，目前只能windows,免費(fèi)版會(huì)有提示。
猿大師中間件（底層調(diào)用VLC的ActiveX控件，實(shí)現(xiàn)在主流瀏覽器網(wǎng)頁(yè)中內(nèi)嵌播放多路RTSP的實(shí)時(shí)視頻流），中間件收費(fèi)的。
PluginOK(牛插)中間件。底層調(diào)用ActiveX控件VlcOcx.dll。（商業(yè)用途需付費(fèi)使用）
3、服務(wù)器拉流轉(zhuǎn)發(fā)及協(xié)議轉(zhuǎn)換
示意圖如下所示：
推流--------------服務(wù)器轉(zhuǎn)發(fā)--------------拉流
方法一覽：
a,vlc軟件串流到http協(xié)議 ，網(wǎng)頁(yè)顯示幾個(gè)視頻需啟動(dòng)幾個(gè)vlc,只適合應(yīng)急場(chǎng)景。
b,html5 + websocket_rtsp_proxy 實(shí)現(xiàn)視頻流直播 ，基于MSE（Media Source Extensions,W3C），擴(kuò)展H5的功能。
步驟：服務(wù)器安裝streamedian服務(wù)器，客戶(hù)端通過(guò)video標(biāo)簽播放。
原型圖：
價(jià)格：
c.基于nginx的rsmp轉(zhuǎn)發(fā)
基于nginx實(shí)現(xiàn)rtmp轉(zhuǎn)化，用flash實(shí)現(xiàn)播放。由于flash目前大多瀏覽器默認(rèn)禁用，不推薦此方式。
步驟：安裝ffmpeg工具,安裝nginx。
另外nginx-rtmp-module也支持HLS協(xié)議,可以搭建基于hls的直播服務(wù)器。
d.rtsp轉(zhuǎn)hls播放,通過(guò)ffmpeg轉(zhuǎn)碼
步驟：安裝ffmpeg工具，ffmpeg轉(zhuǎn)碼。
形如：
ffmpeg -i "rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/hls/test.m3u8"
缺點(diǎn)是直播流延時(shí)很大，對(duì)實(shí)時(shí)要求比較高的不滿(mǎn)足要求。
案例：基于EasyDarwin拾建轉(zhuǎn)碼服務(wù)器。參考地址:
通過(guò)存儲(chǔ)的m3u8去讀取。
e.websocket代理推送，F(xiàn)FMPEG轉(zhuǎn)碼
此方法與a，b類(lèi)似。但更實(shí)用。
以下提供兩種方案：
（1）Gin+WebSocket+FFMPEG實(shí)現(xiàn)rtsp轉(zhuǎn)碼,參考：
通過(guò)FFMPEG把rstp轉(zhuǎn)成http，ginrtsp作為轉(zhuǎn)發(fā)服務(wù)器，但需要自己寫(xiě)相應(yīng)接口，需要了解go語(yǔ)言。
（2）node + ffmpeg + websocket + flv.js，參考：
步驟：在node服務(wù)中建立websocket；通過(guò)fluent-ffmpeg轉(zhuǎn)碼，將RTSP 流轉(zhuǎn)為flv格式；通過(guò)flv.js連接websocket，并對(duì)獲取的flv格式視頻數(shù)據(jù)進(jìn)行渲染播放。
import WebSocket from 'ws'import webSocketStream from 'websocket-stream/stream'import ffmpeg from 'fluent-ffmpeg'// 建立WebSocket服務(wù)const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })// 監(jiān)聽(tīng)連接wss.on('connection', handleConnection)// 連接時(shí)觸發(fā)事件function handleConnection (ws, req) {? // 獲取前端請(qǐng)求的流地址（前端websocket連接時(shí)后面帶上流地址）? const url = req.url.slice(1)? // 傳入連接的ws客戶(hù)端 實(shí)例化一個(gè)流? const stream = webSocketStream(ws, { binary: true })? // 通過(guò)ffmpeg命令 對(duì)實(shí)時(shí)流進(jìn)行格式轉(zhuǎn)換 輸出flv格式? const ffmpegCommand = ffmpeg(url)? ? .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')? ? .on('start', function () { console.log('Stream started.') })? ? .on('codecData', function () { console.log('Stream codecData.') })? ? .on('error', function (err) {? ? ? console.log('An error occured: ', err.message)? ? ? stream.end()? ? })? ? .on('end', function () {? ? ? console.log('Stream end!')? ? ? stream.end()? ? })? ? .outputFormat('flv').videoCodec('copy').noAudio()? stream.on('close', function () {? ? ffmpegCommand.kill('SIGKILL')? })? try {? ? // 執(zhí)行命令 傳輸?shù)綄?shí)例流中返回給客戶(hù)端? ? ffmpegCommand.pipe(stream)? } catch (error) {? ? console.log(error)? }}
優(yōu)點(diǎn)全部基于js。前端即可搞定。
參考:
重慶分公司
重慶分公司
