[官网]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. 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站

    <link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
    <script src=”http://vjs.zencdn.net/c/video.js”></script>
  2. 如果需要支持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>
  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>

其中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();

添加事件

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
};

事件绑定

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

转自:http://blog.csdn.net/ly115176236/article/details/50977127#comments

一款全兼容的播放器 videojs的更多相关文章

  1. 使用react native制作的一款网络音乐播放器

    使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...

  2. 一个非常给力的播放器video-js

    video-js采用的是html5播放器. 在不支持html5的浏览器会自动切换成flash. video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了. ...

  3. 关于解决用tutorial7教程中的代码打造一款自己的播放器中的声音噪音问题

    ////////////////////////////////////////////////////////////////////////////////////////////对于用FFMPE ...

  4. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

  5. C# 一款属于自己的音乐播放器

    本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windows Media Player ...

  6. Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

    一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 源码下载:http://code.66 ...

  7. 酷狗、QQ、天天动听——手机音乐播放器竞品对比

    如果说什么艺术与人们生活最贴近,那应该属音乐了,因此当代人不离身的手机里必然会有自己喜欢的音乐播放器APP存在. 在当今无论PC端还是手机端音乐播放器都越来越同质化,我们应该选择哪款手机音乐播放器?它 ...

  8. MellPlayer, 基于网易云歌单的命令行播放器

    MellPlayer 前言 我写代码时非常喜欢听音乐,最近在网易云歌单中听到了许多入耳惊艳的歌,觉得非常不错.但是歌单的随机播放以及快速切换是个软肋,于是开发了MellPlayer,可以按照分类随机听 ...

  9. JY播放器【蜻蜓FM电脑端,附带下载功能】

    今天给大家带来一款神器----JY播放器.可以不用打开网页就在电脑端听蜻蜓FM的节目,而且可以直接下载,对于我这种强迫症患者来说真的是神器.我是真的不喜欢电脑任务栏上面密密麻麻. 目前已经支持平台(蜻 ...

随机推荐

  1. WebForm路由踩坑 ajax请求多次

    WebForm路由踩坑 再次接触Asp.Net WebForm已是4年后的今天,源起新入职的公司,一个老的项目. Web接触的少,那就多动手写写. WebForm1.aspx <body> ...

  2. Android Monkey压力测试

    Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试. 1为什 ...

  3. doc2vec使用说明(二)gensim工具包 LabeledSentence

    欢迎交流,转载请注明出处. 本文介绍gensim工具包中,带标签(一个或者多个)的文档的doc2vec 的向量表示. 应用场景: 当每个文档不仅可以由文本信息表示,还有别的其他标签信息时,比如,在商品 ...

  4. Coding 及 git 的工程使用方法

        在过去的两周,同学们除了在学习 C 语言之外,还在学习如何利用 git 将自己的代码上传到 coding 中.也有大量的同学,成功的上传了代码.但是,实际上大部分同学的用法都不合理.这里,以一 ...

  5. 1125Sending data

    -- Sending data具体干什么The thread IS processing ROWS FOR a SELECT statement AND also IS sending DATA TO ...

  6. 【转】通过自定义的URL Scheme启动你的App

    http://blog.csdn.net/ba_jie/article/details/6884818原文地址:http://iphonedevelopertips.com/cocoa/launchi ...

  7. Nginx基本使用

    Nginx基本使用 下载源码包http://nginx.org/ http://nginx.org/en/download.html yum -y install pcre-devel openssl ...

  8. HTML5利用link标签的rel=import引入html页面

    如果是以前,我们可以使用iframe去引入,现在可以是这样的形式:<link rel="import" href="a.html" id="tm ...

  9. Bzoj1096 [ZJOI2007]仓库建设

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4193  Solved: 1845 Description L公司有N个工厂,由高到底分布在一座山上. ...

  10. CentOS6.5下Redis安装与配置

    http://blog.csdn.net/ludonqin/article/details/47211109