jQuery Video Extend
HTML5视频扩展插件
能够加入Logo
加入标记
用法:
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.video-extend.js"></script>
<script>
$(document).bind('ready',function() {
$("#video1").videoExtend({
logo: 'logo.png',
logoLink: 'http://itmyhome.com',
logoSize: [45, 20],
markers: [{
time: 13.04, // seconds
text: 'Chapter 1'
}]
})
});
<//script>
<video id="video3" width="450" height="260" controls loop autoplay>
<source src="video/simple.mp4" type="video/mp4">
</video>
还有一种方式:
<video width="450" height="260" data-logo="img/logo.png"
data-markers='[{"time":13,"text":"Chapter 1"},{"time":150,"text":"Chapter 2"}]'>
<source src="video/Sintel.mp4" type="video/mp4">
</video>
演示:pushu.me
PS: MP4其它之外格式是否能播放没有验证。
假设MP4视频不能被播放,可能视频的编码格式不是 h264。
利用格式工厂对mp4视频,用h264视频编码格式又一次编码,得到的视频就能够使用了。
作者:itmyhome
jQuery Video Extend的更多相关文章
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- 理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- 解读jQuery中extend函数
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...
- jQuery的extend方法的深层拷贝
一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...
- jQuery.fn.extend(object) object中this的指向
看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...
随机推荐
- Hdu-5983 2016ACM/ICPC亚洲区青岛站 B.Pocket Cube 模拟
题面 题意:给你一个2*2的魔方,给你每个面每个小块的颜色,一共24个,然后问你能否在一步之内还原. 题解:手动在纸上画,推出每种变化对应的置换,显然,一共有6种,而且可以当成3种,(具体哪3种,就是 ...
- MAVEN 杂记
MAVEN中央仓库 http://repo.maven.apache.org/maven2http://repo1.maven.org/maven2/http://mvnrepository.com/ ...
- Solr.NET快速入门(九)【二进制文档上传】【完】
二进制文档上传 SolrNet支持Solr"提取"功能(a.k.a. Solr"Cell")从二进制文档格式(如Word,PDF等)索引数据. 这里有一个简单的 ...
- Dalvik 堆内存管理与回收
Dalvik虚拟机用来分配对象的堆划分为两部分,一部分叫做Active Heap,另一部分叫做Zygote Heap.下面基于管理机制来介绍为何分配为这两部分,以及堆内存的管理. 我们从Android ...
- Monad 系列
本系列是在学习Monad时在网上找到的一个老外的博客,作者是MikeHadlow,地址是mikehadlow.blogspot.com, 可惜国内访问不了.这个系列对Monad讲解的浅显易懂,而且有 ...
- damn selenium
Selenium+Python [ˈpaɪθən] 0.Selenium安装 pip install selenium 1.打开了浏览器,后边什么都不干了 需要将浏览器驱动放置在环境变量的目录下. 2 ...
- javascript中in运算符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android Studio插件:Android Drawable Importer
Android Drawable Importer 为了在不同分辨率的设备上更好的展示图片的效果,我们往往需要在 res/drawable 中添加不同分辨率的图片.有时我们可能手里只有一份分辨率的图片 ...
- Redis 四:存储类型之散列类型
1.散列类型表达方式简介: =========================================== 键 字段 值 =================================== ...
- Kinect+OpenNI+OpenCV使用
关于OpenNI,已经可以使用2.0,可以不再使用PrimeSense: 这里的是转载其他人的 OpenCV系列: 原文:http://blog.csdn.net/chenxin_130/articl ...