[轉] 視頻直播前端方案

時間 2019-11-18

標籤視頻直播前端方案简体版

原文原文鏈接

流媒體本質上是：現實的圖像，通過編碼器壓縮，持久化爲點播文件或者直播流，通過傳輸，在終端解碼和展現。javascript

http live streaming（hls）

適用移動端
HTTP Live Streaming（HLS）是蘋果公司實現的基於HTTP的流媒體傳輸協議，可實現流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。
css

因爲大多數移動設備的H5頁面的HTML5新的video標籤都支持HLS協議，因此在移動端很是適合使用HLS協議進行直播。html

上圖所示的m3u8格式就是支持HLS協議的流媒體格式。html5

使用方法也很是簡單，直接在html中嵌入一個video標籤及可。java

<video class="video" controls="controls" width="375" height="300" id="player1" webkit-playsinline> <source src="../index.m3u8"> </video>

值得注意的是hls在pc端僅僅支持safari瀏覽器（由於就是蘋果實現的hls技術），因此在相似chrome瀏覽器上是沒法看到視頻的。即便在chrome的調試器中模擬移動端仍是沒法播放視頻。ios

這裏推薦一個播放m3u8格式文件的網站，只要將視頻地址扔到這個網站，就能播放。http://osmfhls.kutu.ru/css3

video標籤擁有不少屬性、事件以及方法。http://www.w3school.com.cn/ta...
包含play() pause()等等，這些原生事件方法就能脫離原生video樣式，打造獨一的風格。git

這裏推薦一個教程，如何用css3實現本身風格的播放器。http://www.inserthtml.com/201...github

另外再說起一點webkit-playsinline屬性，在video中增長這個屬性，用戶在微信App中的webview中打開視頻不會進入默認的全屏播放模式，若咱們給播放器設置了寬200高200，在有這個屬性的前提下打開視頻，高寬仍是200。web

以前有談到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實現方法

待

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。