前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’

本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究。为了让文章通俗易懂,尽量使用白话描述。


0x001: 下载videoJs

对于Video.js 5.x及更低版本,Flash技术(videojs-flash.js插件)是Video.js核心存储库的一部分,不需要单独下载。对于Video.js 6.x及更高版本,Flash技术位于单独的存储库中,需要单独下载。

前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’_第1张图片


从V7开始,我们将不再支持IE 11之前的Microsoft Internet Explorer版本,包括IE 8、9和10.

前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’_第2张图片


请根据自己的业务场景需求抉择下载哪一个版本,这里选择 video-js-6.13.0 下载。
video-jshttps://github.com/videojs/video.js/releases/download/v6.13.0/video-js-6.13.0.zip
video-js-swfhttps://github.com/videojs/video-js-swf/archive/v5.4.2.zip ,内网用户必需下载,后面解释why?

下载完成后解压,其中examples文件夹为video-js示例,可以自己运行一下查看效果。

前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’_第3张图片



0x002: 引用videoJs

examples文件夹内的示例只是作为基于HTML5的播放,要想基于Flash播放,在示例html文件引用基础之上还需 格外 引入以下文件:

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方式初始化(代码仅供参考):

  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               
 35             
 36             <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4">
 37             
 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 videoa>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('播放器1初始化成功');
 68                 videojs.log('Your player is ready!');
 69                 setTimeout(function () {
 70                     player.play();
 71                 }, 2000);
 72                 
 73                 player.one("playing", function () {         // 监听播放
 74                     fillTips('播放器1开始播放');
 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+"
"; 113 } 114 script> 115 116 html>

 
以上代码标签中的src为湖南卫视的rtmp地址,如果可以正常播放,说明videoJs已经搭建完毕。
之后将标签中的src换为自己RTMP服务器的地址,保存,刷新页面观察是否能正常播放监控画面

前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’_第4张图片


0x004: videoJs注意事项

  • 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 8、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(…)

    前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’_第5张图片

     

  • 尝试重新连接时,一定要 重新生成 Video.js。HTML里的

你可能感兴趣的:(前端Web浏览器基于Flash如何实时播放监控视频画面(四)之使用videoJs‘拉流’)