目前主流的幾種直播協(xié)議

協(xié)議傳輸方式視頻封裝格式延時(shí)數(shù)據(jù)分段html播放

httpflv	http	flv	低	連續(xù)	可通過html5解封包播放(flv.js)
rtmp	tcp	flv tag	低	連續(xù)	不支持
dash	http	ts文件	高	切片	可通過html5解封包播放(hls.js)
hls	$1	mp4 3gp webm	高	切片	如果dash文件列表是mp4webm文件，可直接播放

RTMP（Real Time Messaging Protocol）：基于TCP的，由Adobe公司為Flash播放器和服務(wù)器之間音頻、視頻傳輸開發(fā)的開放協(xié)議。

HLS（HTTP Live Streaming）：基于HTTP的，是Apple公司開放的音視頻傳輸協(xié)議。

HTTP FLV：將RTMP封裝在HTTP協(xié)議之上的，可以更好的穿透防火墻等。

---

我們目前使用的rtmp流，庫使用video-js，不過這里需要注意的一點(diǎn)是我們要使用x5版本的，因?yàn)閤6版本及以上不支持rtmp（其實(shí)就是不支持flash了）；

所以這里也放上資源下載連接

video.js v5.18.4版 2017-3-24更新(支持ie8)
video-js.swf

使用

html <div id="content"><video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered" width="100%" height="100%"><!-- source放rtmp流地址 --><source src="rtmp://168.0.0.157:1935/live/stream11" type="rtmp/flv"><p class="vjs-no-js">您的瀏覽器不支持HTML5，請升級瀏覽器。</p></video> </div> 123456789 js //設(shè)置本地flash插件地址 videojs.options.flash.swf = "/js/video-js-5.8.2/video-js.swf";// 初始化視頻，設(shè)為全局變量 var myPlayer = videojs('rtmpVideo', {autoplay: true,controls: true,//控制條poster: "/images/camera/playStop.png",techOrder: ["flash"],//設(shè)置flash播放muted: true,// 靜音preload: "auto",// 預(yù)加載language: "zh-CN",// 初始化語言playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度 }, function () {console.log("--------------成功初始化視頻--------------");myPlayer.one("playing", function () { // 監(jiān)聽播放console.log("開始播放");});myPlayer.one("error", function (error) { // 監(jiān)聽錯(cuò)誤console.error("監(jiān)聽到異常，錯(cuò)誤信息：%o",error);}); });

實(shí)際效果

因?yàn)槲以趯戇@篇文章的時(shí)候后臺(tái)斷掉了調(diào)試，沒有繼續(xù)推送，所以沒有畫面

本地調(diào)試出現(xiàn)的問題

1、播放器在左上角并且提示無法加載插件

答：下載新的flash插件，因?yàn)槲矣玫?0版本，都不提示我更新flash，新的chrome版本會(huì)提示下載更新。

2、本地html頁面打開播放不了

答：需要本地服務(wù)器環(huán)境支持，自己起一個(gè)本地服務(wù)器然后扔進(jìn)去再打開。

總結(jié)

以上是生活随笔為你收集整理的video-js RTMP直播的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。