在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 "...
·
在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说要淘汰了,所有只能另找出路了。
更多推荐
已为社区贡献14条内容
所有评论(0)