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

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

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

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

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

关键代码如下：

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>