下面介绍一下通过jquery和css自定义video播放控件。

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.

实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!

HTML5 Video 基础标签  

<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>

幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.

  在编码之前让我简单的介绍一下jQuery是如何获取video标签的.

  在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.  

//return a DOM object
var video = document.getElementById('videoID'); //or
var video = $('#videoID').get(0); //or
var video = $('#videoID')[0]; //return a jQuery object
var video = $('#videoID');

 Video Play/Pause Controls 播放/暂停 按钮

  好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.  

<div class="control">
<a href="#" class="btnPlay">Play/Pause</a>
</div>

我们可以轻松的控制Html5 Video的播放与暂停状态.

//Play/Pause control clicked
$('.btnPlay').on('click', function() {
if(video[0].paused) {
video[0].play();
}
else {
video[0].pause();
}
return false;
};

显示视频播放时间和持续时间

Html5 Video支持视频回放.这里我们要显示视频的当前播放时间和总时间.

<div class="progressTime">
Current play time: <span class="current"></span>
Video duration: <span class="duration"></span>
</div>

为了得到视频的总时间,我们要确保视频元数据已经加载.这个时候我们要用到Html5 Video的loadedmetadata事件.

  对于当前的视频播放时间.我们可以用Html5 Video timeupdate事件来保证他的更新.

//get HTML5 video time duration
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration);
}); //update HTML5 video current play time
video.on('timeupdate', function() {
$('.current').text(video[0].currentTime);
});

 视频进度条

  在这里我们将会把当前播放时间和总的时间长度转换为更人性化的进度条.

<style>
.progressBar
{
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<div class="progressBar">
<div class="timeBar"></div>
</div>

下面的js就是通过视频的总时间与当前时间的计算,获得播放进度条。

//get HTML5 video time duration
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration));
}); //update HTML5 video current play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime; //Get currenttime
var maxduration = video[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage+'%');
});

下面实现播放进度条的拖拽,来播放视频

var timeDrag = false;   /* Drag status */
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
}); //update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = video[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width(); //Check within range
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
} //Update progress bar and video currenttime
$('.timeBar').css('width', percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};

进阶-显示缓冲栏

我们需要给视频制作一个缓冲栏让用户知道视频加载了多少.

<style>
.progressBar {
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<div class="progressBar">
<div class="bufferBar"></div>
</div>

Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.

//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = video[0].duration;
var currentBuffer = video[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage+'%'); if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
setTimeout(startBuffer, 500);

音量控制

现在,我们要增加声音控制.有两种不同的音量控制方法.静音按钮/音量栏

<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
<div class="volume"></div>
</div>

js:

//Mute/Unmute control clicked
$('.muted').click(function() {
video[0].muted = !video[0].muted;
return false;
}); //Volume control clicked
$('.volumeBar').on('mousedown', function(e) {
var position = e.pageX - volume.offset().left;
var percentage = 100 * position / volume.width();
$('.volumeBar').css('width', percentage+'%');
video[0].volume = percentage / 100;
});

 快进/快退 倒带控制

Html5 Video支持播放速度的改变.我们可以使用playbackrate属性来控制.

<div class="control">
<a href="#" class="ff">Fast Forward</a>
<a href="#" class="rw">Rewind</a>
<a href="#" class="sl">Slow Motion</a>
</div>

不幸的是FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.

/Fast forward control
$('.ff').on('click', function() {
video[0].playbackrate = 3;
return false;
}); //Rewind control
$('.rw').on('click', function() {
video[0].playbackrate = -3;
return false;
}); //Slow motion control
$('.sl').on('click', function() {
video[0].playbackrate = 0.5;
return false;
});

其他

  除了主要的控制插件.还可以做一些额外的控制.例如全屏播放

$('.fullscreen').on('click', function() {
//For Webkit
video[0].webkitEnterFullscreen(); //For Firefox
video[0].mozRequestFullScreen(); return false;
});

开灯关灯控制

$('.btnLight').click(function() {
if($(this).hasClass('on')) {
$(this).removeClass('on');
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('#myVideo').css({
'z-index':1000
});
}
else {
$(this).addClass('on');
$('.overlay').remove();
}
return false;
});

原文地址:http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/#comment-form

jquery和css自定义video播放控件的更多相关文章

  1. jQ效果:jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  2. video视频标签自定义显示隐藏播放控件&Shadow DOM

    方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...

  3. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  4. [转]Oracle分页之二:自定义web分页控件的封装

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...

  5. 基于jquery的可查询多级select控件(可记录历史选择)

    一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个   控件功能:1.可手动输入查询,也可点击下拉框查询, ...

  6. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  7. C# WinForm自定义通用分页控件

    大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...

  8. kettle系列-[KettleUtil]kettle插件,类似kettle的自定义java类控件

    该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...

  9. (转)sl简单自定义win窗体控件

    sl简单自定义win窗体控件      相信大家接触过不少win窗体控件ChildWin子窗口就的sl自带的一个  而且网上也有很多类似的控件,而今天我和大家分享下自己制作个win窗体控件,希望对初学 ...

随机推荐

  1. php中的常用数组函数(三)(获取数组交集的函数们 array_intersect()、array_intersect_key()、array_intersect_assoc()、array_intersect_uassoc()、array_intersect_ukey())

    这5个获取交集的函数 有 5个对应的获取差集的函数.我是链接. array_intersect($arr1, $arr2); //获得数组同键值的交集 array_intersect_key($arr ...

  2. ahjesus根据身份证号码获取相关信息(生日,省市县,性别)

    使用说明: //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! var idCard = new IdCard();var msg = ...

  3. Autofac全面解析系列(版本:3.5) – [使用篇(推荐篇):2.解析获取]

    前言 Autofac是一套高效的依赖注入框架. Autofac官方网站:http://autofac.org/ Autofac在Github上的开源项目:https://github.com/auto ...

  4. Android Studio使用教程(二)

    以下是本次Google I/O大会发布的IDE Android Studio使用教程第二篇: 在Android Studio使用教程(一)中简要介绍了Android Studio的基本使用,包括安装. ...

  5. Engine中如何更改矢量图层字段别名?

    [解决办法]:使用IClassSchemaEdit.AlterFieldAliasName方法可以更改数据源的别名,如果想在图层的属性中更改显示的别名需要使用ITableFields.FieldInf ...

  6. FIM 2010: Kerberos Authentication Setup

    The goal of this article is to provide some background information regarding the Kerberos related co ...

  7. 浅谈Hex编码算法

    一.什么是Hex 将每一个字节表示的十六进制表示的内容,用字符串来显示. 二.作用 将不可见的,复杂的字节数组数据,转换为可显示的字符串数据 类似于Base64编码算法 区别:Base64将三个字节转 ...

  8. Jenkins部署.net自动化构建

    1.环境部署: windows server 2008R2环境   2.相关软件 SVN(源代码管理器:jenkins通过插件从源代码管理器下载代码)   Jenkins(主角)地址:http://f ...

  9. IOS MenuController初步了解

    IOS MenuController初步了解 默认情况下有以下控件已经支持MenuController. UITextField UITextView UIWebView 让其他控件也支持MenuCo ...

  10. Silverlight项目笔记4:初识Prism以及IoC

    1.Prism Prism是由微软Patterns & Practices团队开发的针对WPF和Silverlight的MVVM框架. Prism的几个关键点: (1)启动器类UnityBoo ...