[转] 视频直播前端方案
流媒體本質(zhì)上是：現(xiàn)實(shí)的圖像，經(jīng)過(guò)編碼器壓縮，持久化為點(diǎn)播文件或者直播流，經(jīng)過(guò)傳輸，在終端解碼和展示。
http live streaming（hls）
適用移動(dòng)端
HTTP Live Streaming（HLS）是蘋(píng)果公司實(shí)現(xiàn)的基于HTTP的流媒體傳輸協(xié)議，可實(shí)現(xiàn)流媒體的直播和點(diǎn)播。原理上是將視頻流分片成一系列HTTP下載文件。
由于大多數(shù)移動(dòng)設(shè)備的H5頁(yè)面的HTML5新的video標(biāo)簽都支持HLS協(xié)議，所以在移動(dòng)端非常適合使用HLS協(xié)議進(jìn)行直播。
上圖所示的m3u8格式就是支持HLS協(xié)議的流媒體格式。
使用方法也非常簡(jiǎn)單，直接在html中嵌入一個(gè)video標(biāo)簽及可。
<video class="video" controls="controls" width="375" height="300" id="player1" webkit-playsinline> <source src="../index.m3u8"> </video>值得注意的是hls在pc端僅僅支持safari瀏覽器（因?yàn)榫褪翘O(píng)果實(shí)現(xiàn)的hls技術(shù)），所以在類(lèi)似chrome瀏覽器上是無(wú)法看到視頻的。即使在chrome的調(diào)試器中模擬移動(dòng)端還是無(wú)法播放視頻。
這里推薦一個(gè)播放m3u8格式文件的網(wǎng)站，只要將視頻地址扔到這個(gè)網(wǎng)站，就能播放。http://osmfhls.kutu.ru/
video標(biāo)簽擁有很多屬性、事件以及方法。http://www.w3school.com.cn/ta...?
包含play() pause()等等，這些原生事件方法就能脫離原生video樣式，打造獨(dú)一的風(fēng)格。
這里推薦一個(gè)教程，如何用css3實(shí)現(xiàn)自己風(fēng)格的播放器。http://www.inserthtml.com/201...
另外再提及一點(diǎn)webkit-playsinline屬性，在video中增加這個(gè)屬性，用戶(hù)在微信App中的webview中打開(kāi)視頻不會(huì)進(jìn)入默認(rèn)的全屏播放模式，若我們給播放器設(shè)置了寬200高200，在有這個(gè)屬性的前提下打開(kāi)視頻，高寬還是200。
之前有談到hls協(xié)議的視頻直播格式無(wú)法再pc端播放，但現(xiàn)有許多video庫(kù)可以結(jié)合flash實(shí)現(xiàn)m3u8格式的視頻在pc端各大瀏覽器播放。
https://github.com/johndyer/m...
https://github.com/videojs/vi...
https://github.com/jwplayer/j...
RTMP Real Time Messaging Protocol
Real Time Messaging Protocol（簡(jiǎn)稱(chēng) RTMP）是 Macromedia 開(kāi)發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。這套方案需要搭建專(zhuān)門(mén)的 RTMP 流媒體服務(wù)如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實(shí)現(xiàn)播放器。它的實(shí)時(shí)性非常好，延遲很小，但無(wú)法支持移動(dòng)端ios h5頁(yè)面播放是它的硬傷。
雖然無(wú)法再ios的H5頁(yè)面播放，但是對(duì)于ios原生應(yīng)用是可以自己寫(xiě)解碼去解析的。而且rtmp延遲低，我們公司就采用了rtmp協(xié)議。
在pc瀏覽器端，HTML5video標(biāo)簽無(wú)法播放rtmp協(xié)議的視頻，所以還是需要借用flash去播放。
之前提到的幾個(gè)video庫(kù)都可以實(shí)現(xiàn)這樣的效果，這里就video.js為例。
<body><video class="video-js vjs-default-skin" controls="controls" width="375" height="300" id="player1" webkit-playsinline> <source src="rtmp://wsrtmp.yizhibo.tv:1935/live/0p4kf8k3Aubp" type='rtmp/mp4'> </video> <script type="text/javascript" src="lib/video.min.js"></script> <script> videojs.options.flash.swf = "lib/video-js.swf"; </script> <script type="text/javascript"> var player = videojs('player1', {}, function() { console.log('Good to go!'); this.play(); this.on('ended', function() { console.log('awww...over so soon?'); }); }); </script> </body>youtube pc端html5實(shí)現(xiàn)方法
待
轉(zhuǎn)載于:https://www.cnblogs.com/chris-oil/p/9754088.html
總結(jié)
以上是生活随笔為你收集整理的[转] 视频直播前端方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 从 Dropdown 的 React 实
- 下一篇： 导出excel表格，前端和后台导出