在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)

在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf)

第一步

用npm装这个几个包

 "video.js": "^6.6.0",

 "videojs-flash": "^2.2.0",

 "videojs-swf": "^5.4.2",

第二步

在页面引入上述包

//视频插件包
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
import SWF_URL from "videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

第三步

1，在下面这个js文件中配置

2，配置swf

3,在静态资源static中放入swfs下面得两个swf文件和一个swfobject.js,结构如下

4.在index.html中引入

第四步

终于可以写代码了

html：一个容器就好

<div id="flashContent">
       <a class="flashBtn"target="_blank"href="http://www.adobe.com/go/getflashplayer">
          <span>点击运行flash</span>
            </a>
    </div>

methods: 只需要拿到rtmp流传进去执行一下这个方法就可以播放了。

//预览视频流方法
    initialise(rtmpliu) {
      var queryParameters = [];
      var flashVars = "";
      queryParameters["source"] = rtmpliu;
      console.log(rtmpliu);
      if (queryParameters["source"] == "") queryParameters["source"] = "";
      if (queryParameters["type"] == "") queryParameters["type"] = "live";
      if (queryParameters["idx"] == "") queryParameters["idx"] = "2";
      flashVars += "&src=";
      flashVars += queryParameters["source"];
      flashVars += "&autoHideControlBar=";
      flashVars += unescape("true");
      flashVars += "&streamType=";
      flashVars += queryParameters["type"];
      flashVars += "&autoPlay=";
      flashVars += unescape("true");
      flashVars += "&verbose=";
      flashVars += "true";
      var soFlashVars = {
        src: queryParameters["source"],
        streamType: queryParameters["type"],
        autoPlay: "true",
        controlBarAutoHide: "true",
        controlBarPosition: "bottom"
      };
      /* <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> */
      var swfVersionStr = "10.3.0";
      /* <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --> */
      var xiSwfUrlStr = "/static/swfs/playerProductInstall.swf";
      var params = {};
      params.quality = "high";
      params.bgcolor = "#000000";
      params.allowscriptaccess = "sameDomain";
      params.allowfullscreen = "true";
      var attributes = {};
      attributes.id = "SampleMediaPlayback";
      attributes.name = "SampleMediaPlayback";
      attributes.align = "middle";
      swfobject.embedSWF(
        "/static/swfs/SampleMediaPlayback.swf",
        "flashContent",//对应容器
        900,//width宽
        600,//高
        swfVersionStr,
        xiSwfUrlStr,
        soFlashVars,
        params,
        attributes
      );
    },

小结：方法1和方法2都是要用到flash播放的，不过flash说要淘汰了，所有只能另找出路了。