前段时间在搞一个在线教学的网站,涉及到播放器,在此分享一个好的兼容所有主流浏览器的视频播放插件
一.采用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);
}
}