HTML5视频扩展插件

  • 能够加入Logo

  • 加入标记

用法:

下载:jquery-video-extend

<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的更多相关文章

  1. jquery.fn.extend与jquery.extend--(初体验二)

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...

  2. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  3. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  4. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  5. jQuery原生框架中的jQuery.fn.extend和jQuery.extend

    extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...

  6. 理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  7. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...

  8. jQuery的extend方法的深层拷贝

    一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...

  9. jQuery.fn.extend(object) object中this的指向

    看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...

随机推荐

  1. 如何用jQuery实现div随鼠标移动而移动?(详解)----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  2. A - Presents

    Problem description Little Petya very much likes gifts. Recently he has received a new laptop as a N ...

  3. 3、Collection接口中的功能概述

    package cn.itcast_01; import java.util.ArrayList; import java.util.Collection; /** * 集合: * 由于我们使用的是面 ...

  4. guice基本使用,guice整合guice-servlet,web scope注解(六)

    guice servlet提供了几个比较有用的web scope,类似与传统servlet 的session,request这些提供的范围等. guice servlet 提供的web scope 如 ...

  5. MVC中使用UpdateModel获取接口参数

    废话少说,直接上代码: 模型类定义: public class RequestModel { public string Name { get; set; } public float Age { g ...

  6. Docker 配置与实践清单

    https://mp.weixin.qq.com/s/yeEkF5DKa9IjmIvuzOTT3g

  7. RDS中的.frm和.ibd文件转换为sql文件

    --- 转自他人 mysql存储在磁盘中,各种天灾人祸都会导致数据丢失.大公司的时候我们常常需要做好数据冷热备,对于小公司来说要做好所有数据备份需要支出大量的成本,很多公司也是不现实的.万一还没有做好 ...

  8. 修改数组数据头和尾push()、pop()和unshift()、shift()

    1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...

  9. android黑科技系列——破解游戏之修改金币数

    我们在玩游戏的时候总是会遇到一些东东需要进行购买的,但是我们可能又舍不得花钱,那么我们该怎么办呢?那就是用游戏外挂吧!我们这里说的是Android中的游戏,在网上搜索一下移动端游戏外挂,可能会找到一款 ...

  10. 13.javaweb xml标签库详解

    一.XML标签简介 1,  作用 2,  标签分类 XPath 路径标记 查找节点元素示例 2.1<x:out> 2.2<x:parse> 操作示例:导入XML文件,解析,然后 ...