<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> <video id="roomVideo" class="video-js" controls preload="auto" width="100%" height="100%" class="vjs-big-play-centered">
<source src="${RTMPUrl }" type="rtmp/flv">
<p class="vjs-no-js">播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。</p>
</video> <script type="text/javascript">
document.getElementById("roomVideo").style.height= window.innerHeight +"px";
document.getElementById("roomVideo").style.width= window.innerWidth +"px"; var options = {
techOrder : ["html5","flash"],
//autoplay:true, //是否自动播放
bigPlayButton:false, //是否显示播放按钮
controls:true, //是否用显示控制条
textTrackDisplay:false,
posterImage:false,
errorDisplay:false,
control:{
captionsButton:false,
chaptersButton:false,
subtitlesButton:false,
liveDisplay:false,
playbackRateMenuButton:false
},
controlBar: {
muteToggle:false,
ProgressControl:false
}
};
var player = videojs('roomVideo', options, function onPlayerReady() {
videojs.log('播放器已经准备好了!');
player.play();
startVideo(); this.on('ended', function() {
console.log('播放结束了!');
}); }); var isVideoBreak;
function startVideo() {
//判断开始播放视频,移除高斯模糊等待层
/*var isVideoPlaying = setInterval(function(){
var currentTime = player.currentTime();
if(currentTime > 0){
$('.vjs-poster').remove();
clearInterval(isVideoPlaying);
}
},200)*/ //判断视频是否卡住,卡主3s重新load视频
var lastTime = -1,
tryTimes = 0; clearInterval(isVideoBreak);
isVideoBreak = setInterval(function(){
var currentTime = player.currentTime();
if(currentTime == lastTime){
//此时视频已卡主3s
//设置当前播放时间为超时时间,此时videojs会在play()后把currentTime设置为0
player.currentTime(currentTime+10000);
player.play(); //尝试5次播放后,如仍未播放成功提示刷新
if(++tryTimes > 5){
//dialog('提示',"您的网速有点慢,刷新下试试",1);
window.location.reload();
tryTimes = 0;
}
}else{
lastTime = currentTime;
tryTimes = 0;
}
},3000)
} </script> ${HLSUrl } <br/>
${RTMPUrl } <br/>
${HDLUrl } <br/>

videojs的更多相关文章

  1. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  2. 一款全兼容的播放器 videojs

    [官网]http://www.videojs.com/ videojs就提供了这样一套解决方案,他是一个兼容HTML5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持h ...

  3. 如何使用videojs兼容IE8浏览器

    需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...

  4. videojs 动态加载视频

    VideoJS dynamic source change via RESTful API 'Undefined' issue with changing RTMP source on compres ...

  5. 基于Html5的兼容所有主流浏览器的在线视频播放器videoJs

    在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...

  6. 一个非常给力的播放器video-js

    video-js采用的是html5播放器. 在不支持html5的浏览器会自动切换成flash. video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了. ...

  7. videojs 视频开发API

    videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3. ...

  8. videojs设置播放点

    videojs提供了currentTime的函数可以设置当前的播放时间,但是在实际运用当中出现了问题 var vid1 = videojs('vid1'); vid1.src('http://vide ...

  9. Videojs视频插件在React中的应用

    1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Ht ...

  10. 免费视频播放器videojs中文教程

    Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 ...

随机推荐

  1. iOS开发——高级篇——iOS如何彻底避免数组越界

    我们先来看看有可能会出现的数组越界Crash的地方: ? 1 2 3 4 5 6 7 - (void)tableView:(UITableView *)tableView didSelectRowAt ...

  2. 【bzoj2003】[Hnoi2010]Matrix 矩阵

    首先可以知道,如果已知第一行和第一列的数,那么可以很容易的计算出其余的数.进一步的,如果笔算将每个数的表达式写出可以得出如下结论: 第i行的第j个数(i>1,j>1)只与(1,1),(i, ...

  3. ssh服务常见问题及其解决办法

    1 统一解决办法 执行sshd -t,这样就可以指出是哪里出问题了. 所有的服务都应该有这个测试选项,否则出错了都不知道在哪里出的问题. 2 root用户登录,密码是对的,但是报“Permission ...

  4. 通过spark rdd 求取 特征的稀疏向量

    通过spark rdd 求取  特征的稀疏向量 spark 类标签的稀疏 特征向量 - bonelee - 博客园 http://www.cnblogs.com/bonelee/p/7814081.h ...

  5. struts2 下载

    struts  官网 : https://struts.apache.org/

  6. iOS开发-多台机器共用证书问题

    今天又被证书的问题卡壳了: 在公司的电脑上申请的开发.发布证书,回家用自己的电脑从苹果开发者中心上将证书和配置文件都下载下来提示用不了,弄了很久才想起.p12文件,必须从申请证书的电脑上导出,导入到自 ...

  7. java异常——重新抛出异常

    有时候希望把刚捕获的异常重新抛出,尤其是在使用Exception捕获所有异常的时候.既然已经得到了对当前异常对象的引用,可以直接把它重新抛出: catch(Exception e){ System.o ...

  8. java笔记线程方式1优先级

    * 我们的线程没有设置优先级,肯定有默认优先级. * 那么,默认优先级是多少呢? * 如何获取线程对象的优先级? *   public final int getPriority():返回线程对象的优 ...

  9. sourcetree跳过注册方法

    很人用git命令行不熟练,那么可以尝试使用sourcetree进行操作. 然鹅~~sourcetree又一个比较严肃的问题就是,很多人不会跳过注册或者操作注册. 废话不多,我们直接开始跳过注册阶段的操 ...

  10. 数组去重----es6&es5&数组对象去重

    es6方法: 普通数组: 1.使用Array.from(new Set(arr)); /* * @param oldArr 带有重复项的旧数组 * @param newArr 去除重复项之后的新数组 ...