一款全兼容的播放器 videojs
来源:互联网 发布:主机屋数据库名在哪里 编辑:程序博客网 时间:2024/05/02 00:59
一款全兼容的播放器 videojs
[官网]http://www.videojs.com/
videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本。
最新的版本
下载-5.8.0-releases版本
目录结构
video.js/├── alt│ ├── video.novtt.js│ ├── video.novtt.min.js│ └── video.novtt.min.js.map├── examples/├── font│ ├── VideoJS.eot│ ├── VideoJS.svg│ ├── VideoJS.ttf│ └── VideoJS.woff├── ie8│ ├── videojs-ie8.js│ └── videojs-ie8.min.js├── lang/├── video-js-5.8.0.zip├── video-js.css├── video-js.min.css├── video-js.swf├── video.js├── video.js.map├── video.min.js└── video.min.js.map
引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”><script src=”http://vjs.zencdn.net/c/video.js”></script>
如果需要支持IE8,这个js可以自动生成flash
<!-- If you'd like to support IE8 --><script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
页面中加入一个html5的video标签
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}"> <source src="my_video.mp4" type="video/mp4"> <source src="my_video.webm" type="video/webm"></video>
其中post就是视频的缩略图,那俩source一个指向mp4视频,一个指向webm视频,在页面加载过程中,video.js会判断浏览器支持哪个格式视频,会自动加载可播放的视频。
简单吧!
进阶:使用api
获取对象:
后面那个就是就是video标签的id值,这是myPlayer就是播放器对象了。
videojs("my-video").ready(function(){ window.myPlayer = this; // EXAMPLE: Start playing the video. myPlayer.play();});
方法:
获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){ //在回调函数中,this代表当前播放器, //可以调用方法,也可以绑定事件。})
播放:
myPlayer.play();
暂停:
myPlayer.pause();
获取播放进度:
var whereYouAt = myPlayer.currentTime();
设置播放进度:
myPlayer.currentTime(120);
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
var howLongIsThis = myPlayer.duration();
缓冲,就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();
声音大小(0-1之间)
var howLoudIsIt = myPlayer.volume();
设置声音大小
myPlayer.volume(0.5);
取得视频的宽度
var howWideIsIt = myPlayer.width();
设置宽度:
myPlayer.width(640);
获取高度
var howTallIsIt = myPlayer.height();
设置高度:
myPlayer.height(480);
一步到位的设置大小:
myPlayer.size(640,480);
全屏
myPlayer.enterFullScreen();
离开全屏
myPlayer.enterFullScreen();
添加事件
durationchangeended //播放结束firstplayfullscreenchangeloadedalldataloadeddataloadedmetadataloadstartpause //暂停play //播放progressseekedseekingtimeupdatevolumechangewaitingresize inheritedvar myFunc = function(){// Do something when the event is fired};
事件绑定
myPlayer.on("ended", function(){ console.log("end", this.currentTime());});myPlayer.on("pause", function(){ console.log("pause")});
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。
另外video的写法中还有专门针对flash的写法,当然你也可以用这个插件实现纯粹的flash播放(只写flash那部分就好,可以保证统一的浏览效果,不过ios的浏览器不兼容flash,这就要你自己进行判断来处理
一个播放器demo
- 一款全兼容的播放器 videojs
- 一款全兼容的播放器 videojs
- 一款全兼容的播放器 videojs
- 一款开源免费跨浏览器的视频播放器--videojs使用介绍
- 基于Html5的兼容所有主流浏览器的在线视频播放器videoJs
- HTML5的视频播放器videojs
- HTML5视频播放器VideoJS使用附【源码及示例】- 兼容IE
- 免费视频播放器videojs中文教程
- Videojs播放RTMP流媒体
- Videojs播放RTMP流媒体
- videoJS播放器嵌入页面及api介绍
- 一款免费的网页嵌入式播放器
- 制止一款简单的视频播放器
- 一款可调速率的音乐播放器
- videojs集成--播放rtmp流
- 解决EasyDSS流媒体服务器videojs flash播放RTMP、HLS提示错误的问题
- EasyDSS RTMP流媒体服务器videojs flash播放RTMP/HLS提示错误的解决方案
- 一款Flv的网页播放器的详解
- Java多线程之线程状态转换
- 操作系统的分段与分页的区别
- Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderListener
- 通用的可带查询条件的SQL语句的分页存储过程
- maven中央仓库地址
- 一款全兼容的播放器 videojs
- Android开发实用技巧之一:全局获取Context的技巧
- 将 MS Word 作为维基可视化编辑器使用
- java学习笔记(1)
- 使用C++ REST SDK开发简单的Web(HTTP)服务
- Android Studio 签名打包过程图解
- 抓iphone数据
- Python中的sorted函数以及operator.itemgetter函数
- Unity3D EditorWindow一些小心得