废话不多说,上代码:
html:
<div class="bg-gradient-main">
<a href="http://www.adobe.com/go/getflashplayer" rel="nofollow" target="_blank" title="升级Flash插件" id="setFlash">检测到浏览器未启用flash插件,点击启用</a>
<!--视频监控系统-->
<div class="videoControNewlFx">
<div style="width:100%;height: 100%;float:left;overflow:hidden;z-index: -3;" id="videoDiv">
<video id="videoDiv0" class="video-js vjs-default-skin vjs-big-play-centered" muted=true controls="true/false" loop="true" autoplay="true" style="width:100%;height:100%;;" onclick="getvideoIdStr(this)"><source src="#" type="rtmp/flv"></video>;
</div>
</div>
</div>
<script
特别注意js引用顺序:
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";//flash路径,有一些html播放不了的视频,就需要用到flash播放。这一句话要加在在videojs.js引入之后使用
</script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
JavaScript:
1.检测浏览器是否加载
//检测flash是否加载
function flashChecker() {
var hasFlash = 0; //是否安装了flash
var isIE = /*@cc_on!@*/0; //是否IE浏览器
if (isIE) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
}
}
}
return { f: hasFlash};
}
var fls = flashChecker();
var s = "";
if (fls.f)
$("#setFlash").css("display","none");
2.代码实现播放
videojs("videoDiv0").src(url);
videojs("videoDiv0").play();
完成收工!!!!
下面附上引用js下载链接:
video.js以及video-js.swf百度网盘地址: https://pan.baidu.com/s/1V8Buzi5JF1roizYVSlourg 提取码:fpi6
链接失效或技术问题请加QQ群:16066006