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

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

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

<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

兼容所有浏览器的网页播放器相关推荐

解决Chrome浏览器打开虾米音乐网页播放器时的排版问题
2019独角兽企业重金招聘Python工程师标准>>> 几年了,虾米音乐网页播放器听音乐都有个纠结的地方,就是用Chrome浏览器打开时,排版会出错,表现为播放器右边一部分显示不出来 ...
兼容firefox、chrome、ie的wmp网页播放器代码
Windows Media Player(以下简称wmp)是一款大家很常用的网页播放器组件,在ie浏览器横行的日子里,大家很容易就可以在自己的网页中插入wmp,和大家一起分享自己喜欢的音乐. 从Fir ...
html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
经常使用网页播放器代码
经常使用网页播放器代码我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其它的无非是面板不同,或者加入了其它控件,对于计算机上安装的一些播放器也都 ...
直播播放器+html5,10款html5网页播放器推荐（总有一款适合你）
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
html5+php视频播放器,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
html5网页中加入播放器,10款jquery+html5实现的网页播放器
1.3D版HTML5模拟衣服拖拽动画效果这是一款3D版HTML5模拟衣服拖拽动画效果源码,是一款非常具有创意而且很好玩的HTML5动画.运行本例源码可见衣服布料呈3D环形显示,可以用鼠标左键来拖拽衣 ...
flv网页播放器php源码下载,JavaScript_js实现的万能flv网页播放器代码，本文实例讲述了js实现的万能fl - phpStudy...
js实现的万能flv网页播放器代码本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: 附: swfobject.js的官方地址:http://blog.deconce ...
挑选几款开源的、优秀的H.265网页播放器，进行特征整理及使用评价
H265和H264都是视频编码规范,H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少.之前由于终端支持有限,h265的推广使用 ...

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

兼容所有浏览器的网页播放器相关推荐

最新文章

热门文章