jwplayer ：若请求不到流，则页面一直转圈请求效果

思路：利用jwplayer onPlay(播放) 、onError（出错）事件。git

页面：背景图为黑色，嵌入一张背景为黑色的 git 动态图，加载页面时隐藏。app

流程：若进入到onPlay 方法，则说明能正常播放，则黑色背景与 gif动态图隐藏。ide

若进入到onError方法，则说明播放有问题，则黑色背景与 gif动态图显示，而且不断地调用初始化方法。flex

关键代码以下：url

var thePlayer;  //保存当前播放器以便操做
                var playpath = ""; var callback = function () { console.log("callback");};//定义一个回调方法
                var initPlayer = function(playpath) { thePlayer = jwplayer('container_video').setup({ flashplayer: 'jwplayer/jwplayer.flash.swf', file: playpath, width: "100%", height: "", aspectratio:'16:9', allowfullscreen:true, allowscriptaccess:"always", autostart:true, enablejs:true, bufferlength:1, rotatetime:1, dock: false, bwfile:playpath, rtmp: { subscribe: true },events: { onComplete: function () { console.log("播放结束!!!"); }, onVolume: function () { console.log("声音大小改变!!!"); }, onReady: function () { console.log("准备就绪!!!"); }, onPlay: function () { console.log("开始播放!!!"); $("#mygif").hide(); $("#myblack").hide(); }, onPause: function () { console.log("暂停!!!"); }, onBufferChange: function () { console.log("缓冲改变!!!"); }, onBufferFull: function () { console.log("视频缓冲完成!!!"); }, onError: function (obj) { console.log("播放器出错!!!" + obj.message); $("#mygif").show(); $("#myblack").show(); initPlayer(playpath); }, onFullscreen: function (obj) { if (obj.fullscreen) { console.log("全屏"); } else { console.log("非全屏"); } }, onMute: function (obj) { console.log("静音/取消静音") } } }); }

<div id="xqzxPlay" style="background-color: black">
<div class="panel panel-info" style="border: none;background: transparent;border-radius: 0px;" >
 

<div id="mygif" style="background:url(https://cloudapps.sjedu.cn/video/assets/img/black.png);display: flex;justify-content: center;align-items: center;height: 640px;">
    <img id="haveFlash" src="https://cloudapps.sjedu.cn/video/assets/img/timg.gif" style="">
    <a id="startFlash" href="http://www.adobe.com/go/getflashplayer" rel="nofollow" target="_blank" title="升级Flash插件" style="display: inline;width: 100%">
        <img src="https://cloudapps.sjedu.cn/video/assets/img/startflash.png" style="width: 100%">
    </a>
</div>

<div pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" id="myVideo" style="width: 100%; ">
    <div class='video_play' id='video_play'><div id='container_video'></div></div>
</div>


 <br>


<br/>
<br/>
</div>
</div>