前端Web瀏覽器基於Flash如何實時播放監控視頻畫面（四）之使用videoJs‘拉流’

時間 2019-11-10

標籤前端 web 瀏覽器基於 flash 如何實時播放監控視頻畫面使用 videojs 欄目 HTML 简体版

原文原文鏈接

本片文章只是起到拋磚引玉的做用，能從頭至尾走通就行，並不作深刻研究。爲了讓文章通俗易懂，儘可能使用白話描述。css

0x001: 下載videoJs

對於Video.js 5.x及更低版本，Flash技術（videojs-flash.js插件）是Video.js核心存儲庫的一部分，不須要單獨下載。對於Video.js 6.x及更高版本，Flash技術位於單獨的存儲庫中，須要單獨下載。html

從V7開始，咱們將再也不支持IE 11以前的Microsoft Internet Explorer版本，包括IE 八、9和10.前端

請根據本身的業務場景需求抉擇下載哪個版本，這裏選擇 video-js-6.13.0 下載。
video-js（https://github.com/videojs/video.js/releases/download/v6.13.0/video-js-6.13.0.zip）
video-js-swf（https://github.com/videojs/video-js-swf/archive/v5.4.2.zip ，內網用戶必需下載，後面解釋why？）

下載完成後解壓，其中examples文件夾爲video-js示例，能夠本身運行一下查看效果。html5

0x002: 引用videoJs

examples文件夾內的示例只是做爲基於HTML5的播放，要想基於Flash播放，在示例html文件引用基礎之上還需格外引入如下文件：

jquery

1 <script src="項目根路徑/ie8/videojs-ie8.min.js"></script>    （不使用ie8無需引入）
2 <script src="項目根路徑/lang/zh-CN.js"></script>    （video播放界面支持中文）
3 <script src="項目根路徑/videojs-flash.js"></script>    （支持flash）
4 
5 <script>
6     videojs.options.flash.swf = "項目根路徑/video-js.swf";//全局方式覆蓋，SWF文件在Flash技術的位置
7 </script>

0x003: 使用videoJs

初始化videoJs有兩種方式，examples文件夾內的示例是以html屬性初始化，data-setup="{}"
爲了方便編寫事件，下面以JS方式初始化（代碼僅供參考）：

git

  1 <!DOCTYPE html>
  2 <html lang="en" style="height:100%">
  3 <head>
  4     <meta http-equiv="Access-Control-Allow-Origin" content="*">
  5     <meta charset="utf-8">
  6     <meta name="description" content="Opencast Media Player">
  7     <meta name="author" content="Opencast">
  8     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  9     <title>RTMP播放</title>
 10     
 11     <link href="video-js.min.css" rel="stylesheet">
 12     <script src="ie8/videojs-ie8.min.js"></script>
 13     <script src="video.min.js"></script>
 14     <script src="lang/zh-CN.js"></script>
 15     
 16     <script src="videojs-flash.js"></script>
 17     <script src="jquery-1.11.1.min.js"></script>
 18     
 19     <script>
 20         videojs.options.flash.swf = "video-js.swf";//全局方式覆蓋 SWF文件在Flash技術位置的位置
 21     </script>
 22 
 23     <style type="text/css">
 24         body {height: 100%;margin: 0;padding: 0;}
 25         .videoArea{width: 49.8%;height: 49.8%; float: left;border: 1px solid grey; }
 26         .videoTips{border: 1px solid grey; font: 12px arial,sans-serif; margin: 10px; padding: 5px;
 27             width: 97.5%; height:100px; overflow:auto; float: left;"}
 28     </style>
 29 </head>
 30 <body>
 31 
 32     <div id="video_1_area" class="videoArea">
 33         <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls style="width: 100%;height: 100%;" >
 34               <!-- RTMP直播源地址 截止至發稿前直播源仍然可用-->
 35             <!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1"> -->
 36             <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4">
 37             <!-- <source src="rtmp://192.168.234.131:1935/mytv/test1" type="rtmp/flv"> -->
 38             <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="" target="_blank">supports HTML5 video</a></p>
 39         </video>
 40     </div>
 41  
 42     <div class="videoTips"></div>
 43 </body>
 44      <script>
 45          var options = {
 46                  poster: 'Logo.png',            //未播放時 的封面
 47                 techOrder: ["flash", "html5"],    //定義Video.js技術首選的順序。這意味着Html5首選技術
 48                 //autoplay: true,                    //播放器準備好以後，是否自動播放 【默認false】
 49                 //controls: false,                 //是否顯示控制欄
 50                 preload: 'auto',                //預加載
 51                 muted: true,                    //靜音
 52                 language: "zh-CN",                //初始化語言
 53                 //fluid: true,
 54                 /*flash: {                        //指定Video.js SWF文件在Flash技術的位置
 55                     swf: '//path/to/videojs.swf'
 56                 },*/
 57                 /*controlBar: {                     // 配置控制欄
 58                     timeDivider: false, // 時間分割線
 59                     durationDisplay: false, // 總時間
 60                     progressControl: true, // 進度條
 61                     customControlSpacer: true, // 未知
 62                     fullscreenToggle: true // 全屏
 63                 },*/
 64             }
 65          
 66         var player = videojs('example_video_1', options, function(){
 67                 fillTips('<span>播放器1初始化成功</span>');
 68                 videojs.log('Your player is ready!');
 69                 setTimeout(function () {
 70                     player.play();
 71                 }, 2000);
 72                 
 73                 player.one("playing", function () {         // 監聽播放
 74                     fillTips('<span>播放器1開始播放</span>');
 75                 });
 76                 player.one("play", function () {         // 監聽播放
 77                     console.log('準備開始播放');
 78                 });
 79                 player.on('pause', function () {
 80                     console.log('暫停播放');
 81                 });
 82                 player.on('ended', function () {
 83                     console.log('結束播放');
 84                 });
 85 
 86                 //------events    綁定事件用on    移除事件用off
 87                 player.on('loadstart',function () {
 88                   console.log('loadstart------------')
 89                 });
 90                 player.on('loadedmetadata',function () {
 91                   console.log('loadedmetadata---視頻源數據加載完成----')
 92                 });
 93                 player.on('loadeddata',function () {
 94                   console.log('loadeddata---渲染播放畫面----');
 95                 });
 96                 player.on('progress',function () {
 97                   console.log('progress-------加載過程----')
 98                 });
 99                 player.on('timeupdate',function () {
100                   const curTime = this.currentTime();
101                   //console.log('timeupdate-------------',curTime);
102                 })
103                 player.off('timeupdate',function () {
104                   console.log('off----------timeupdate')
105                 })
106                 //this.play();
107             });
108     </script>
109 
110     <script>
111         function fillTips (str) {
112             document.getElementsByClassName('videoTips')[0].innerHTML+=str+"<br/>";
113         }
114     </script>
115 
116 </html>

以上代碼<source>標籤中的src爲湖南衛視的rtmp地址，若是能夠正常播放，說明videoJs已經搭建完畢。
以後將<source>標籤中的src換爲本身RTMP服務器的地址，保存，刷新頁面觀察是否能正常播放監控畫面github

0x004: videoJs注意事項web

VideoJs播放器html頁面若是不丟到服務器環境下可能出現沒法播放的狀況。瀏覽器
對於Video.js 5.x及更低版本，Flash技術是Video.js核心存儲庫的一部分。video.js 6.x及更高版本（Video.js> = 6.0.0）雖然官方說：Flash技術位於單獨的存儲庫中，即videojs-flash.js插件。但值得注意的是，videojs-flash.js在引入後會自動經過網絡加載video-js.swf。
如果內網環境使用videojs-flash.js插件，則必需先將video-js.swf下載到本地，其次再在項目中引用而且使用全局設置覆蓋JS源碼內寫死的video-js.swf。以下：
videojs.options.flash.swf = "video-js.swf";
強烈建議使用本地video-js.swf，由於這樣能夠減小一些奇葩的問題出現，爲排錯節省時間。服務器
Video.js對於IE8的支持，官網這樣解釋
Beginning with v7, we will no longer support Microsoft Internet Explorer versions prior to IE 11, including IE 8, 9, and 10.
從V7開始，咱們將再也不支持IE 11以前的Microsoft Internet Explorer版本，包括IE 八、9和10.
強烈建議使用Video.js V7.0以前的6.x的最後一個版本，由於新版本老是要比老版本優化的BUG多。即，不必非得使用5.x（固然選擇什麼版本是你的權利）
通過屢次測試發現，Video.js對於普通標準化的RTMP流能夠很好的支持，但如果對於非標準化的RTMP流鏈接成功的概率是隨機的，
有時能成功有時不能成功。尤爲是對於非標準化的RTSP流使用ffmpeg推的RTMP流。（海康可見光流基本能夠在3S內接入，但另外一個廠家的熱像設備流基本要看緣分了）

對於這種現象的解決方案就是，在保證VLC或其餘播放器能正常播放的前提下，HTML頁面初始化一段時間內（好比15s,20s等）Video.js若鏈接不成功，則繼續嘗試從新鏈接，等待若干時間（好比15s,20s等），若仍鏈接不成功，則再繼續嘗試從新鏈接,以此類推，直到鏈接成功。
謹記，等待鏈接的時間要放久一點，不然會出現某個時間點內Video.js一直鏈接不成功，致使死循環。
嘗試從新鏈接前，請先將當前Video.js的實例銷燬掉。不然會一直報錯。這個錯是一直在累加的。
videojs-flash.js:610 Uncaught TypeError: this.el_.vjs_getProperty is not a function
VIDEOJS: ERROR: TypeError: this.el_.vjs_getProperty is not a function(…)
嘗試從新鏈接時，必定要從新生成 Video.js。HTML裏的<video>標籤塊和<script>裏的videojs(videoId, {}, function(){})都得從新生成！
由於第一次執行videojs(videoId, {}, function(){})初始化時，html DOM結構已經被解析成別的樣子了。
（一開始不瞭解，怎樣從新賦值src，怎樣調load()方法都很差使，在這上面耗費了很長很長時間）
參考 https://blog.csdn.net/w3624270/article/details/78504877
　　 https://blog.csdn.net/qq_42842709/article/details/84942207
注意必須用 videojs獲取的實例才能調用方法，用jquery 或 document.getXXXXXXXX()獲取的對象不行。

0x005: 遺留問題

不曾在官網找到 videoJs 監測視頻源出現異常或斷開的事件
(由於車間內使用監控的RTSP流並非很穩定，並非很標準，有時候會斷流，從而致使ffmpeg轉RTMP時ERROR。那麼若是有此監聽事件就能夠To Do Something)

0x006: 使用體驗

對於videoJs初步使用感覺並無網上文章寫的那麼好用，那麼牛X。對於播放普通Mp4文件的用途來講，網速給力的話可能並無什麼感受（斷點續播有點問題），但對於直播的用途來講，小毛病不少，須要注意的點不少，有些問題可能會須要很長時間才能找到解決方法，甚至無果。只能說如今能基本知足現需求，若是後期有滿意的替代品會考慮將其更換。

0x007: 完結

至此，前端Web瀏覽器基於Flash如何實時播放監控視頻畫面的文章已經所有完結。
關於文章中遺留的問題或編寫錯誤之處，若是您有什麼更好的看法或解決方案歡迎指出或批評，不吝賜教。