Video.js实现rtmp视频播放

废话不多说,上代码:
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

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值