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>