思路: 利用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>

jwplayer :若请求不到流,则页面一直转圈请求效果的更多相关文章

  1. NET MVC全局异常处理(一) 【转载】网站遭遇DDoS攻击怎么办 使用 HttpRequester 更方便的发起 HTTP 请求 C#文件流。 Url的Base64编码以及解码 C#计算字符串长度,汉字算两个字符 2019周笔记(2.18-2.23) Mysql语句中当前时间不能直接使用C#中的Date.Now传输 Mysql中Count函数的正确使用

    NET MVC全局异常处理(一)   目录 .NET MVC全局异常处理 IIS配置 静态错误页配置 .NET错误页配置 程序设置 全局异常配置 .NET MVC全局异常处理 一直知道有.NET有相关 ...

  2. 同 一个页面,不同请求路径,如何根据实际场景写JS

    场景:使用同一个“添加群成员”的页面来操作 建群页面:建群成功后,返回查看群成员页面.在建群过程中直接添加群成员并返回一个群名称的参数. 添加群成员页面:在巳有群内添加群成员,添加成功后,返回查看群成 ...

  3. 转:jquery向普通aspx页面发送ajax请求

    本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager. $.ajax向普通页面发送 ...

  4. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  5. asp.net 网站所有请求跳转到同一个页面

    应用场景:网站维护和未开发完成时,一般需要把所有请求都跳转的一个相关说明的页面,这样用户不至于困惑这个网站是不存在还是怎么了. Solution1:使用一个名称为 app_offline.htm(名字 ...

  6. Java 对IP请求进行限流.

    高并发系统下, 有三把利器 缓存 降级 限流. 缓存: 将常用数据缓存起来, 减少数据库或者磁盘IO 降级: 保护核心系统, 降低非核心业务请求响应 限流: 在某一个时间窗口内对请求进行限速, 保护系 ...

  7. jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作

    背景:有一个按钮,点击之后向后端程序发起Ajax请求,在请求结果没有返回之前,页面显示等待的效果,此时仍旧是异步请求,等待的效果在接收到结果后撤销. 需求:因为网络延迟或者后端程序的问题,在发起Aja ...

  8. 通过http请求传递xml流和接收xml流的代码示例

    通过http请求传递xml流和接收xml流的代码示例 //1.在servlet中post一个xml流:import java.io.OutputStreamWriter;import org.jdom ...

  9. https页面 和 http请求的问题

    (1)强制升级http 静态资源地址为https地址 https页面中不能使用http请求,http页面中可以使用https请求. 关于在https 页面有一些http的请求,可以在<head& ...

随机推荐

  1. 亚洲唯一:瀚思科技入选2019 Gartner SIEM 领域 Peer Insights,其他第一象限的有splunk和logrithym,elastic==,RSA、fortinet、rapid7和翰思一样都在第二象限

    亚洲唯一:瀚思科技入选 Gartner SIEM 领域 Peer Insights     网络安全技术与产业,正在由传统的合规驱动,走向合规与需求双轮驱动.关注用户需求.倾听用户声音,根据实际情况打 ...

  2. php的冒泡排序

    有其它语言基础, 这些套路弄起来就是快! 都在注释里~ <?php /** * 冒泡排序 PHP实现 * 原理:两两相邻比较,如果反序就交换,否则不交换 * 时间复杂度:最好 O(n) 最坏 O ...

  3. Python 利用函数、列表来实现计算天数

    这几天课程学习了列表的操作,结合以前的函数知识,编写了一个能够判断天数的代码 源码如下 def is_year(year): return year % 4 == 0 and year % 100 ! ...

  4. 学习Microsoft Visio(3)

    流程图的规范及技巧 一.流程图绘制基本要求 二.流程图绘制规范要点 在进行流程图的绘制过程中,要有一条明晰的流程主线,从而使得流程图脉络更加清晰. 通常来讲,流程图要以开始任务为起点,完成任务为终点. ...

  5. CentOS7.6 yum方式安装redis最新版

    sudo yum install -y http://rpms.famillecollet.com/enterprise/remi-release-7.rpm sudo yum --enablerep ...

  6. 如何使用keil5将stm32的hal库编译成lib文件——F1版本

    hal库中keil5中编译的速度是比较慢的,相同情况下,每次都要编译的时候,比标准库是要慢很多的,因此就hal库编译成lib文件是一种加快编译速度的方法,当然也有其自身的缺点.一.步骤1.使用cube ...

  7. 持续集成学习7 jenkins自动化代码构建

    一.整体功能 1.触发上下游构建 2.我们在触发一个job的时候顺便丢一些参数过去,这些参数有可能是我这次编译过程中产生的一些地址,版本号或动态的一些东西丢到下游作为下游的构建参数 3.不同种类的视图

  8. circus docker image web 运行异常问题的解决

    经过查看官方文档,因为我使用的是python 较高版本,存在兼容问题,解决方法 修改基础镜像版本 代码如下: FROM python:2.7-slim-stretch LABEL AUTHOR=&qu ...

  9. 【NOIP2014】真题回顾

    题目链接 生活大爆炸版石头剪刀布 就是个模拟,不说了 联合权值 枚举每个点,统计它任意两个儿子的联合权值,统计的时候维护sum和max就行了 飞扬的小鸟 比较好的DP题,不难想到用dp[i][j]表示 ...

  10. 「ZJOI2016」小星星

    传送门 Description Solution 容斥,考虑有多少个节点不被匹配到,求出的方案,多个点可以同时不被匹配到 状态压缩+树形dp Code  #include<bits/stdc++ ...