下面介绍一下通过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

jQ效果:jQuery和css自定义video播放控件的更多相关文章

  1. 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. C# WinForm自定义通用分页控件

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

  5. C# Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面

    个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...

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

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

  7. Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面 z

    http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...

  8. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  9. c#自定义液晶数字控件

    c#自定义液晶数字控件   项目中经常与硬件打交道,LED显示屏上面的液晶数字很好看,QT中直接就有数码管这个控件,C#中自己来写一个,其实掌握了一种自定义控件的写法,其他的都是浮云,举一反三,最笨的 ...

随机推荐

  1. linq转载

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  2. Mapreduce atop Apache Phoenix (ScanPlan 初探)

    利用Mapreduce/hive查询Phoenix数据时如何划分partition? PhoenixInputFormat的源码一看便知: public List<InputSplit> ...

  3. Android一些日常的错误

    一.加载.so出现的一些问题 1. so文件 放进了优先级低的ABI目录 问题:如果你的项目中,有其他优先级更好的ABI目录,但是你把ABI文件方法放到了优先级低的目录,最后导致你的ABI文件无法被加 ...

  4. ubuntu 16.04下源码安装opencv3.4

    源码安装opencv,遇到了一些小波折,这里做个备忘吧. 首先要下载源码,路径: https://github.com/opencv/opencv 下载成功后,在opencv的根目录下执行下面操作: ...

  5. 重磅:Spring Boot 2.0 正式发布!

    Spring Boot 2.0 正式发布! 2018/03/01最新消息,传得沸沸扬扬的Spring Boot 2.0 正式发布了. 小编去看了下Spring Boot的官网,正式版本已经释放出来了! ...

  6. Spring 异常处理三种方式 @ExceptionHandler

    异常处理方式一. @ExceptionHandler 异常处理方式二. 实现HandlerExceptionResolver接口 异常处理方式三. @ControllerAdvice+@Excepti ...

  7. 在Hadoop集群上的Hive配置

    1. 系统环境Oracle VM VirtualBoxUbuntu 16.04Hadoop 2.7.4Java 1.8.0_111 hadoop集群master:192.168.19.128slave ...

  8. Ubuntu编译安装最新的webkit

    好久都没更新webkit 源码在ubuntu上编译了,网上搜了一下,基本上都是早期编译的webkit版本.可能是大家都去搞高大上的谷歌浏览器了吧. 今天就以ubuntu14.04版本作为编译环境来讲讲 ...

  9. Eureka核心知识点

    一.Eureka特性1.当注册中心挂了,客户端之间依然可以通过原有的注册表进行调用:注册中心重启后,客户端会继续注册进来 2.当服务提供者挂了,在关闭自我保护的情况下,注册中心在规定时间(默认是60s ...

  10. Spring Cloud Consul使用——配置中心

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...