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

浅浅的花香味﹌ 2021-10-18 18:58 188阅读 0赞

思路： 利用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("静音/取消静音") }
                            }
                        });
                        }

转载于:https://www.cnblogs.com/remember-forget/p/11098762.html