下面介绍一下通过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视频标签自定义显示隐藏播放控件&amp;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. 节日来了发个HTML5红包

    效果图: 请关注微信公众号 何问起 , 账号ihewenqi ,或者微信扫描下图二维码: 关注后发送 愚人节 ,或 微信节日红包 ,可以体验效果. 代码如下: <!DOCTYPE html> ...

  2. Jenkins部署到远程(Linux服务器)

    接着上次的说,上次只是实现了本地自动化部署,这种情况只是针对开发环境和部署环境在同一台机器时适用.不过,一般情况下,我们都会要把项目部署到远程Linux服务器上,所以这节的主要内容是: 1.部署开发环 ...

  3. php session文件修改路径

    默认状态下php的 sess_文件会生成到/tmp目录下,1天的时间就会生成很多,由于/tmp目录下还有别的重要文件,所以看起来不爽.具体更改做法是,找到 php.ini文件里面的session.sa ...

  4. 查看编译后的calss文件编译jdk版本

    使用UtralEdit或者sublime text打开编译后的.class文件, 其中cafe babe为magic number(魔数),标识这个文件是java的class文件. 0033转换成10 ...

  5. HDU-1495 非常可乐 (嵌套结构体-广搜 对比 一般广搜)

    题意 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多.但 ...

  6. 利用gulp把本地文件移动到指定待发布文件夹

    一.目标 把本地的文件移动到待发布的文件中,把static_grab文件中file.txt所列文件列表移动到beta对应文件夹中: 二.实现 var gulp = require('gulp'), w ...

  7. Confluence 6 目录中的数据库

    所有的其他数据库,包括有页面,内容都存储在数据库中.如果你安装的 Confluence 是用于评估或者你选择使用的是 Embedded H2 Database 数据库.数据库有关的文件将会存储在 da ...

  8. Log4J基础详解及示例大全(转)

    log4j可以通过使用配置文件的方式进行配置. 配置步骤如下: 1.定义日志组件logger 每个logger都可以拥有一个或者多个appender,每个appender表示一个日志的输出目的地,比如 ...

  9. Leader Election 选举算法

    今天讲一讲分布式系统中必不可少的选举算法. leader 就是一堆服务器中的协调者,某一个时刻只能有一个leader且所有服务器都承认这个leader. leader election就是在一组进程中 ...

  10. 将一个byte[]数组根据大小拆分为若干小byte[]数组方法

    /// <summary> /// 将大数组拆分为多个小数组 /// </summary> /// <param name="superbyte"&g ...