兼容所有浏览器的网页播放器

前段时间在搞一个在线教学的网站,涉及到播放器,在此分享一个好的兼容所有主流浏览器的视频播放插件

 

一.采用video.js的插件

首先下载video.js最新v5.18.4版 2017-3-24更新(支持ie8)

链接地址:http://www.jq22.com//jquery/jQueryVideo.js5.18.4.zip

下面是具体调用的页面代码

想兼容ie8,必须引入videojs.options.flash.swf = 'video-js.swf';

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 5.18.4</title>
<link href="css/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="js/videojs-ie8.min.js"></script>


<style>
body{background-color: #191919}
.m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>

<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="http://192.168.1.231:9093/edu-online/dl/video/2017-10-19/FN2017101922220484822.mp4" type="video/mp4">

<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = 'video-js.swf';
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){

var myPlayer = this;
myPlayer.play();
});
</script>
</div>

</body>
</html>

 

 

二,下面给出插件的一些方法

durationchange

ended  //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause  //暂停
play   //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
  
var  myFunc =  function (){
     // Do something when the event is fired
};
 
三,如果需要时刻保留视频的进度问题,可以加一个定时器,按时读取视频的播放时间
function start() {
var myPlayer;
var progress;
myPlayer = videojs(currentvideoId);
progress = Math.ceil(myPlayer.currentTime());
} else {
setTimeout(start, 1000);
}
}
四。如果想在播放器上添加pdf,doc文件等播放,请联系博主,可提供插件

转载于:https://www.cnblogs.com/fanxinaa/p/7717004.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值