Video.js 5.x 處理rtmp視頻流

時間 2019-12-05

標籤 video.js video 5.x 處理 rtmp 視頻欄目 JavaScript 简体版

原文原文鏈接

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，如今屬於 Adobe。這套方案須要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，而且在瀏覽器中只能使用 Flash 實現播放器。它的實時性很是好，延遲很小，但沒法支持移動端 WEB 播放是它的硬傷。瀏覽器端，HTML5 video標籤沒法播放 RTMP 協議的視頻，能夠經過 video.js 來實現。css

我司原先用的是ReactSwf，結果會出現中止播放後，視頻播放器就黑屏的現象。html

下面的例子可直接在瀏覽器裏查看效果! 可是要運行在服務器上(Chrome)

若是你用的是腳手架開發，能夠直接放在靜態目錄裏，好比vue2.5.0 的staticvue

<!DOCTYPE html>
<html lang="zh">

<head>
  <title>Document</title>
  <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
</head>

<body>

  <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
    autoplay="autoplay" poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>

    <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks1' type='rtmp/flv' />

  </video>
</body>
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
</html>
複製代碼

poster="//vjs.zencdn.net/v/oceans.png"

視頻未播放時展現的內容git

videojs.options.flash.swf

這個是全局設置播放控件的 github

videojs 默認是去 vjs.zencdn.net/swf/5.3.0/v… ，能夠下載到本地web

這個東西設置有問題話，播放器只會顯示一個初始的暫停播放按鈕，點擊還沒反應，這個讓我花費了好多時間。ajax

動態獲取src

若是地址是經過ajax獲取的，就須要使用js的方式動態初始化瀏覽器

var player = videojs('my-player');
    
複製代碼

由於我用的是React，因此不須要動態設置srcbash

更多的設置能夠看官網服務器

github.com/videojs/vid…

my-player 是video的id，吐槽一下，這樣可讀性很差，仍是要加上# 或者videojsById

總結

其實我看了不少文章，這些文章大多不能看到結果，好比用的js庫是本地，不能看到版本，或是播放視頻流是本地，不少只是冷冷地貼上代碼，或是將別人的文章直接拷貝過來。

上述這些狀況很影響判斷的，正是由於上述列子能看到結果，我才能經過單一變量原則，確認是videojs.options.flash.swf 這個設置不對致使的問題，不然我可能還要搞好久，當讓這和自己的經驗有很大關係，我是第一次搞這種東西，沒見過這種世面，慚愧。

網上有不少cdn廠商，好比www.bootcdn.cn/，誠懇大佬們儘可能提供一段可運行、可看到效果的代碼，幫人幫到底，送佛送到西，提早表示謝意，讚美之詞溢於言表。

相關標籤/搜索

每日一句

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