一、簡介

我們看到了HLS播放視頻實時性非常差，好的在6-7s，差點的就要10-12s了，也就是人走了，估計視頻上還能看到，這對觀感效果造成了很大的影響！但是好處就是它是基于http協議文件下載的，所以不需要任何插件，到處播放，處處兼容，所以rtmp和hls在web端的特點如下：HLS

(1) 使用http協議，兼容所有瀏覽器。

(2) 延時非常大，不太適合實時視頻源，適合文件點播或歷史錄像直播。RTMP

(1) 使用flash插件播放，不兼容所有瀏覽器(特別2020年12月后chrome帶頭不再支持flash)

(2) 瀏覽器播放需要對瀏覽器安全進行設置，此外點播可能還會彈出確定提示，交互體驗較差

(3) 更貼近傳統監控的實時協議，實時性非常好，基本與實時視頻點播一致

考慮到實時性，我們可能還會選擇使用rtmp協議點播我們的視頻，所以就實時性而言還是很有必要考慮rtmp協議的使用，接下來，我要跟大家一起分享的就是在web端使用rtmp協議查看視頻。

二、VideoJS播放rtmp

前端播放代碼如下所示：

video.js播放rtmp流

class="video-js vjs-default-skin vjs-big-play-centered" controls

preload="auto" autoplay="autoplay"

poster="images/logo.png" width="500" height="400"

data-setup='{}'>

// 設置flash路徑,用于在videojs發現瀏覽器不支持HTML5播放器的時候自動喚起flash播放器

videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';

//my-player為頁面video元素的id

var player = videojs('my-player');

//播放

player.play();

// 1. 播放 player.play()

// 2. 停止 player.pause()

// 3. 暫停 player.pause()

我使用的是360瀏覽器，測試沒有提示flash插件安全限制，直接播放出來。延遲時間大概在1s以內。

那么如何解決？我們需要配置chrome允許flash運行，在chrome瀏覽器中輸入設置地址：chrome://settings/content/flash

瀏覽器開放flash之后并不是所有瀏覽器就可以播放了，如果是http的可能會提示不安全，需要單獨為該網站開放flash，如下所示，點擊chrome瀏覽器“不安全”提示按鈕，在菜單中打開flash

再次刷新該網站就可以看到rtmp直播視頻了

源碼獲取、合作、技術交流請獲取如下聯系方式：

QQ交流群：961179337

微信賬號：lixiang6153

公眾號：IT技術快餐

電子郵箱：lixx2048@163.com

總結

以上是生活随笔為你收集整理的h5 rtmp推荐控件_H5播放Rtmp之videojs播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。