[转] 视频直播前端方案
流媒體本質上是：現實的圖像，經過編碼器壓縮，持久化為點播文件或者直播流，經過傳輸，在終端解碼和展示。
http live streaming（hls）
適用移動端
HTTP Live Streaming（HLS）是蘋果公司實現的基于HTTP的流媒體傳輸協議，可實現流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。
由于大多數移動設備的H5頁面的HTML5新的video標簽都支持HLS協議，所以在移動端非常適合使用HLS協議進行直播。
上圖所示的m3u8格式就是支持HLS協議的流媒體格式。
使用方法也非常簡單，直接在html中嵌入一個video標簽及可。
<video class="video" controls="controls" width="375" height="300" id="player1" webkit-playsinline> <source src="../index.m3u8"> </video>值得注意的是hls在pc端僅僅支持safari瀏覽器（因為就是蘋果實現的hls技術），所以在類似chrome瀏覽器上是無法看到視頻的。即使在chrome的調試器中模擬移動端還是無法播放視頻。
這里推薦一個播放m3u8格式文件的網站，只要將視頻地址扔到這個網站，就能播放。http://osmfhls.kutu.ru/
video標簽擁有很多屬性、事件以及方法。http://www.w3school.com.cn/ta...?
包含play() pause()等等，這些原生事件方法就能脫離原生video樣式，打造獨一的風格。
這里推薦一個教程，如何用css3實現自己風格的播放器。http://www.inserthtml.com/201...
另外再提及一點webkit-playsinline屬性，在video中增加這個屬性，用戶在微信App中的webview中打開視頻不會進入默認的全屏播放模式，若我們給播放器設置了寬200高200，在有這個屬性的前提下打開視頻，高寬還是200。
之前有談到hls協議的視頻直播格式無法再pc端播放，但現有許多video庫可以結合flash實現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（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端ios h5頁面播放是它的硬傷。
雖然無法再ios的H5頁面播放，但是對于ios原生應用是可以自己寫解碼去解析的。而且rtmp延遲低，我們公司就采用了rtmp協議。
在pc瀏覽器端，HTML5video標簽無法播放rtmp協議的視頻，所以還是需要借用flash去播放。
之前提到的幾個video庫都可以實現這樣的效果，這里就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實現方法
待
轉載于:https://www.cnblogs.com/chris-oil/p/9754088.html
總結
以上是生活随笔為你收集整理的[转] 视频直播前端方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从 Dropdown 的 React 实
- 下一篇： Linux进阶：DNS详解