[官网]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. Webpack学习笔记一:What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  2. 2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

    2016-2017-2 <Java程序设计>课程学生博客和代码托管链接 博客 1552 20155201 李卓雯 20155202 张 旭 20155203 杜可欣 20155204 王 ...

  3. 点击弹出li所在的序列号

    最近在研究一个图片替换功能,及点击左侧商品在右侧弹出层修改图片后,同时左侧的图片也得跟着修改. 我原来考虑的添加ID作为唯一值.但当ID重复了,替换就出BUG了. 最后问公司同事,然后给提供了 根据点 ...

  4. go 数据类型转换

    使用strconv 包 首先需要import strconv包 //string to int i,err := strconv.Atoi(str) // string to int64 i64,er ...

  5. Redis集群(四):主从配置二

    一.本文目的        主要介绍redis主从模式下各种情况 二.说明 主从的基本概念:Master用于写入,Slaver用于读取,不能写入或修改,一个Master可以对应多个Slaver Mas ...

  6. github-windows本地安装

    Step1 准备工作 msysgit,下载地址为 http://msysgit.github.io/ . Eclipse IDE for Java EE Developers(必须是这个,自带Egit ...

  7. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  8. wpf converter converterparameter 绑定多参数

    1. converterparameter不是依赖属性,所以不能用binding. 2. 可以把converter 的接口 IValueConverter改为 IMultiValueConverter ...

  9. HDU 1817Necklace of Beads(置换+Polya计数)

    Necklace of Beads Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  10. JQ001-认识jQuery 和 JQ002-jQuery选择器

    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...