jquery和css自定义video播放控件
下面介绍一下通过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播放控件的更多相关文章
- jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- video视频标签自定义显示隐藏播放控件&Shadow DOM
方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...
- h5 的video视频控件
h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
- [转]Oracle分页之二:自定义web分页控件的封装
本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...
- 基于jquery的可查询多级select控件(可记录历史选择)
一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个 控件功能:1.可手动输入查询,也可点击下拉框查询, ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- C# WinForm自定义通用分页控件
大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...
- kettle系列-[KettleUtil]kettle插件,类似kettle的自定义java类控件
该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...
- (转)sl简单自定义win窗体控件
sl简单自定义win窗体控件 相信大家接触过不少win窗体控件ChildWin子窗口就的sl自带的一个 而且网上也有很多类似的控件,而今天我和大家分享下自己制作个win窗体控件,希望对初学 ...
随机推荐
- T-SQL的回车和换行符(SQL)
T-SQL的回车和换行符(SQL) sql server中的回车换行字符是 char(13)+char(10) 回车:char(13) 换行:char(10) 实例1: DECLARE @c NVA ...
- PHP imagecopyresampled 参数图示
- Spring InitializingBean和init-method
原文转自:http://blog.csdn.net/shaozheng1006/article/details/6916940 InitializingBean Spirng的Initiali ...
- vmware linux top si高以及网卡队列、软负载相关优化
今日,测试公司自行开发的一rpc中间件,期间发现top si的比例很高,且几乎只有一个cpu是繁忙的,其他均基本为0. 经查,si主要是系统软中断,最后确定是网卡导致的系统中断.于是,往上搜了下资料, ...
- 安装sql server managerment studio报错"The instance id is required but it is missing"
问题描述: 今天在安装sql server managerment studio的时候提示报错"The instance id is required but it is missing&q ...
- XCode升级到7后,规范注释生成器VVDocumenter插件没有用了,怎么办?
Xcode更新到7之后,发现很多插件包括规范注释生成器VVDocumenter的插件都没法用了,找遍百度都没有找到成功解决这个问题的方法,然后我突发奇想,把注释也弄进代码模板里.虽然没有插件那样灵活: ...
- IOS之Foundation之探究学习Swift实用基础整理<一>
import Foundation //加载网络数据,查找数据的字符串 let dataurl = "http://api.k780.com:88/?app=weather.city& ...
- Stronger (What Doesn't Kill You)
今天听一个歌曲,挺不错的.以前一直不知道意思.这次把歌词摘抄下来. 试听音乐: 原版MV: You know the bed feels warmer 你知道被窝里的温暖 Sleeping here ...
- javascript对象模型和function对象
javascript中,函数就是对象 <html> <head> <script type="text/javascript"> functio ...
- TCP面向连接网络编程
一 TCP&UDP协议 TCP,Tranfer Control Protocol,是一种面向连接的保证可靠传输的协议.通过TCP协议传输,得到的是一个顺序的无差错的数据流.发送方和接收方的成对 ...