一款全兼容的播放器 videojs
一款全兼容的播放器 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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”> <script src=”http://vjs.zencdn.net/c/video.js”></script>
- 1
- 2
- 3
如果需要支持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>
- 1
- 2
- 3
页面中加入一个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>
- 1
- 2
- 3
- 4
- 5
- 6
其中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();
});
- 1
- 2
- 3
- 4
- 5
- 6
方法:
获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){//在回调函数中,this代表当前播放器,//可以调用方法,也可以绑定事件。
})
- 1
- 2
- 3
- 4
- 5
播放:
myPlayer.play();
- 1
- 2
暂停:
myPlayer.pause();
- 1
- 2
获取播放进度:
var whereYouAt = myPlayer.currentTime();
- 1
- 2
设置播放进度:
myPlayer.currentTime(120);
- 1
- 2
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
var howLongIsThis = myPlayer.duration();
- 1
- 2
缓冲,就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
- 1
- 2
百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();
- 1
- 2
声音大小(0-1之间)
var howLoudIsIt = myPlayer.volume();
- 1
- 2
设置声音大小
myPlayer.volume(0.5);
- 1
- 2
取得视频的宽度
var howWideIsIt = myPlayer.width();
- 1
- 2
设置宽度:
myPlayer.width(640);
- 1
- 2
获取高度
var howTallIsIt = myPlayer.height();
- 1
- 2
设置高度:
myPlayer.height(480);
- 1
- 2
一步到位的设置大小:
myPlayer.size(640,480);
- 1
- 2
全屏
myPlayer.enterFullScreen();
- 1
- 2
离开全屏
myPlayer.enterFullScreen();
- 1
- 2
添加事件
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inheritedvar myFunc = function(){
// Do something when the event is fired
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
事件绑定
myPlayer.on("ended", function(){console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){console.log("pause")
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
- 1
- 2
虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。
另外video的写法中还有专门针对flash的写法,当然你也可以用这个插件实现纯粹的flash播放(只写flash那部分就好,可以保证统一的浏览效果,不过ios的浏览器不兼容flash,这就要你自己进行判断来处理
一个播放器demo
转载自:http://blog.csdn.net/ly115176236/article/details/50977127
一款全兼容的播放器 videojs相关推荐
- html5的在线播放页面,整理5款html5网页播放器,总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- 无损音乐刻录成cd有意义吗_Mac装机必备之拯救歌荒,好用的五款Mac音乐播放器推荐!...
Mac平台上好用的音乐播放器有什么推荐?想要最新最热的音乐排行榜.歌单.电台.MV?想要海量无损在线曲库?追求高品质的听觉盛宴? 今天给大家分享的是Mac装机必备之音乐播放器推荐,拯救你的歌荒,缓解你 ...
- 直播播放器+html5,10款html5网页播放器推荐(总有一款适合你)
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- iphone html5音乐播放器,从界面到功能 五款iPhone音乐播放器年度横评
前言:音乐播放器应该是目前所有iPhone用户必备的一类App.而作为国内用户而言,在音乐播放器的选择上是很丰富的.比如在目前iPhone客户端上,主流的音乐播放器就有:酷狗音乐.QQ音乐.多米音乐. ...
- html5+php视频播放器,整理5款html5网页播放器,总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- CyberLink PowerDVD V20.0.2325.62 ,跳脱你对影音播放工具的想象,一款全方位媒体播放器
CyberLink PowerDVD 跳脱你对影音播放工具的想象,不仅只是播放 DVD 与蓝光光盘,更是一款全方位媒体播放器,协助你管理媒体档案,轻松播放视频.音乐与照片.除了能在计算机或笔记本上播放 ...
- Android音视频学习系列(七) — 从0~1开发一款Android端播放器(支持多协议网络拉流本地文件)
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...
- Linux 下的三款 Flash 独立播放器
现在互联网上流传有不少以 SWF 形式发布的教学视频.如何在 Linux 下观看这些教学视频文件呢? 实际上,这些 SWF 格式的视频就是编译好的 Flash 字节码文件.与同样是以 Flash 传播 ...
- 几款好用播放器ijkplayer、vlc、SmartPlayer、ExoPlayer
ijkPlayer ijkPlayer是BiliBili公司维护的一个开源工程,基于ffmpeg开发的一个播放器软件,支持Android和iOS平台,整个ijkplayer就是以ffplay为基础,如 ...
最新文章
- 读书笔记白帽子讲web安全
- bzoj1078【SCOI2008】斜堆
- Python 第三方库之 Celery 分布式任务队列
- php处理base64数据,php基于base64解码数据与图片的转换
- 开源开放 | 开源网络通信行业知识图谱(新华三)
- java web 开发基础_javaweb开发基础(一)
- python内存回收垃圾有哪些_[Python之路] 内存管理垃圾回收
- 未能在sysindexes中找到数据库ID11中对象ID1的索引ID1对应的行,请对sysindexes运行
- “十四五”国家信息化规划发布,十大要点解读
- DOSBOX的安装及ASM文件的编译
- 如何成为一名IC验证工程师——IC修真院直播
- 翻译翻译什么叫HTML5(四)jQuery——给我的网页换个小皮肤
- MATLAB版 代码狗屁不通的狗屁不通文章生成器
- SLAM十四讲第三讲实践:useGeometry------小白强行读代码
- Mac 自动化执行脚本 Expect
- pet 计算机术语,计算机专业英语翻译1?计算机专业英语翻译1、Tobecompet 爱问知识人...
- ospf协议(包含负载分担)
- OpenSSL密码库算法笔记——第 2.2.4章 Barrett模数与相关函数
- CF 1567 C. Carrying Conundrum(思维)
- 数位DP 学习笔记1(数位DP入门)