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>