videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本。

最新的3.1.0版本优化了之前的做法,只需要提供两个格式的视频,页面制作起来更加方便,只有两步走:
  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、页面中加入一个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

  获取对象:
    var myPlayer = _V_(“my_video_1″);
  后面那个就是就是video标签的id值,这是myPlayer就是播放器对象了。

  播放:
    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();

  添加事件
    var myFunc = function(){
      // Do something when the event is fired
    };
    myPlayer.addEvent(“eventName”, myFunc);
  删除事件
    myPlayer.removeEvent(“eventName”, myFunc);

  所有事件列表:

    NameDescriptionloadstart开始加载play播放.pause暂停.timeupdateFired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.就是时间变化吧,与具体的播放技术有关,不同浏览器及格式不同。ended播放结束durationchangeFired when the duration of the media resource is changed, or known for the first time.下载进度变化吧。progress进度变化.resize大小修改.volumechange音量变化.error出错.

虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。
  最后,这么好使的脚本,是免费的么?
  经查,该脚本遵循LGPLv3协议,听着协议又头大了?这里讲个常识:
  如果你的项目中要使用开源的代码,而你的项目又不开源,可选的开源协议有:BSD、MIT、LGPL、Apache Licence 2.0。其中前两种甚至可以修改源代码,但一定要标注版权;后两种可以随便用,但是不要随便改,呵呵。所以你要使用这个脚本的话,是完全可以的,api也这么全,至于css,并不受版权保护,你可以根据需要改变为你要的样式即可。

videojs 视频开发API的更多相关文章

  1. 驱动开发学习笔记. 0.06 嵌入式linux视频开发之预备知识

    驱动开发读书笔记. 0.06  嵌入式linux视频开发之预备知识 由于毕业设计选择了嵌入式linux视频开发相关的项目,于是找了相关的资料,下面是一下预备知识 UVC : UVC,全称为:USB v ...

  2. 浅谈iOS视频开发

     浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我们从 ...

  3. WebRTC 音视频开发

    WebRTC 音视频开发 webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译 ...

  4. java微信开发API解析(二)-获取消息和回复消息

    java微信开发API解析(二)-获取消息和回复消息 说明 * 本演示样例依据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/20 ...

  5. iOS 视频开发学习

    原文:浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我 ...

  6. Android 音视频开发学习思路

    Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...

  7. Android 音视频开发(一) : 通过三种方式绘制图片

    版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/7456956.html 在 Android 音视频开发学习思路 里面,我们写到了,想要逐步入门音视频开发,就 ...

  8. Android 音视频开发(七): 音视频录制流程总结

    在前面我们学习和使用了AudioRecord.AudioTrack.Camera.MediaExtractor.MediaMuxer API.MediaCodec. 学习和使用了上述的API之后,相信 ...

  9. 转:Android IOS WebRTC 音视频开发总结 (系列文章集合)

    随笔分类 - webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译 ...

随机推荐

  1. zabbix PHP databases support off Fail

    zabbix初始化检查安装环境不通过: PHP databases support off   Fail     --未找到所支持的数据库 处理方法:安装Mysqli模块 ############## ...

  2. 面试前的准备---C#知识点回顾----03

    经过一天的奔波,喜忧参半,不细表 再回看下标题,C#知识点回顾 再看下内容,数据库3NF 原谅我这个标题党 今天继续回忆 1.HTTP中Post和Get区别 这忒简单了吧,大家是不是感觉到兴奋了,长舒 ...

  3. C#利用QrCode.Net生成二维码(Qr码)

    在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度 ...

  4. Android零碎知识点总结

    1 简单的跨进程通信可以用Messenger类,不用AIDL. 2 当一个Service没有action时,它默认是exported="false"的,其它进程用它的包名和类名构造 ...

  5. 百度地图API提示"230错误 APP Scode校验失败"

    笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...

  6. PHP学习笔记二十五【类的继承】

    <?php //定义父类 class Stu{ public $name; protected $age; protected $grade; private $address;//私有变量不会 ...

  7. UIView的常用方法

    bringSubviewToFront: 把指定的子视图移动到顶层 - (void)bringSubviewToFront:(UIView *)view 参数 view 需要移到顶层的视图 conve ...

  8. JavaScript禁止用户多次提交方法

    [当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> & ...

  9. SQL Server 2000/2005 分页SQL — 单条SQL语句

    有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...

  10. pubwin会员合并

    此博文已移至爬不稳独立博客:www.pubwin2009.net连接:http://www.pubwin2009.net/index.php/post/15.html 我们说下过程(这里,我们要求两个 ...