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

最新推荐文章于 2019-04-30 19:48:06 发布

Evelyn2015

最新推荐文章于 2019-04-30 19:48:06 发布

阅读量741

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fanxinaa/p/7717004.html

版权

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

一.采用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">

<script src="js/videojs-ie8.min.js"></script>

<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