HTML5+CSS3+JQuery打造自定义视频播放器
来源:http://www.html5china.com/HTML5features/video/201109206_1994.html
简介
HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发者想尽快用上,但是真正使用前还有些问题要考虑,尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题,Google几个月前发布的开源视频编码VP8有望能解决这一问题,另外Google还发布了开放网络媒体项目WebM,旨在帮助开发者为开放网络制作出世界级媒体格式,Opera, Firefox, Chrome和IE9都将支持VP8,而且Flash Player也将可以播放VP8,这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5<video>播放器,这是目前Flash Player的优势所在,利用Flash的IDE所提供的接口可以很方便的构建一个个性化的视频播放器,那HTML5的<video>标签要怎样才能实现呢?这个问题就是本文所要解决的!我们将开发一个HTML5<video>视频播放器的jQuery插件,并且可以很方便的进行自定义,将分为以下几个部分:
1.视频控制工具条
2.视频控制按钮
3.打包成jQuery插件
4.外观和体验
5.自定义皮肤
视频控制工具条
做为一个专业的web开发人员,我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent),但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同:
那就没办法了,我们得自己从头来创建这个控制工具条,利用HTML和CSS再加上一些图片实现起来并不算很难,另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。
视频控制按钮
基本的视频控制工具条要包含一个播放/暂停按钮,一个进度条,一个计时器和一个音量控制按钮,我们将这些按钮放在<video>元素下面,并用一个div作为父容器:
- <div class="ghinda-video-controls">
- <a class="ghinda-video-play" title="Play/Pause"></a>
- <div class="ghinda-video-seek"></div>
- <div class="ghinda-video-timer">00:00</div>
- <div class="ghinda-volume-box">
- <div class="ghinda-volume-slider"></div>
- <a class="ghinda-volume-button" title="Mute/Unmute"></a>
- </div>
- </div>
注意,我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。
打包成jQuery插件
创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的,正如前面提到的一样我们将我们的播放器打包成jQuery插件,这样可以很好的实现复用,代码如下:
- $.fn.gVideo = function(options) {
- // build main options before element iteration
- var defaults = {
- theme: 'simpledark',
- childtheme: ''
- };
- var options = $.extend(defaults, options);
- // iterate and reformat each matched element
- return this.each(function() {
- var $gVideo = $(this);
- //create html structure
- //main wrapper
- var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
- //controls wraper
- var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');
- $gVideo.wrap($video_wrap);
- $gVideo.after($video_controls);
- //get newly created elements
- var $video_container = $gVideo.parent('.ghinda-video-player');
- var $video_controls = $('.ghinda-video-controls', $video_container);
- var $ghinda_play_btn = $('.ghinda-video-play', $video_container);
- var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);
- var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);
- var $ghinda_volume = $('.ghinda-volume-slider', $video_container);
- var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);
- $video_controls.hide(); // keep the controls hidden
- var gPlay = function() {
- if($gVideo.attr('paused') == false) {
- $gVideo[0].pause();
- } else {
- $gVideo[0].play();
- }
- };
- $ghinda_play_btn.click(gPlay);
- $gVideo.click(gPlay);
- $gVideo.bind('play', function() {
- $ghinda_play_btn.addClass('ghinda-paused-button');
- });
- $gVideo.bind('pause', function() {
- $ghinda_play_btn.removeClass('ghinda-paused-button');
- });
- $gVideo.bind('ended', function() {
- $ghinda_play_btn.removeClass('ghinda-paused-button');
- });
为了创建进度条的拖动块,我们使用了jQuery UI的Slider组件:
- var createSeek = function() {
- if($gVideo.attr('readyState')) {
- var video_duration = $gVideo.attr('duration');
- $ghinda_video_seek.slider({
- value: 0,
- step: 0.01,
- orientation: "horizontal",
- range: "min",
- max: video_duration,
- animate: true,
- slide: function(){
- seeksliding = true;
- },
- stop:function(e,ui){
- seeksliding = false;
- $gVideo.attr("currentTime",ui.value);
- }
- });
- $video_controls.show();
- } else {
- setTimeout(createSeek, 150);
- }
- };
- createSeek();
- var gTimeFormat=function(seconds){
- var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
- var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
- return m+":"+s;
- };
- var seekUpdate = function() {
- var currenttime = $gVideo.attr('currentTime');
- if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
- $ghinda_video_timer.text(gTimeFormat(currenttime));
- };
- $gVideo.bind('timeupdate', seekUpdate);
至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能:
- $ghinda_volume.slider({
- value: 1,
- orientation: "vertical",
- range: "min",
- max: 1,
- step: 0.05,
- animate: true,
- slide:function(e,ui){
- $gVideo.attr('muted',false);
- video_volume = ui.value;
- $gVideo.attr('volume',ui.value);
- }
- });
- var muteVolume = function() {
- if($gVideo.attr('muted')==true) {
- $gVideo.attr('muted', false);
- $ghinda_volume.slider('value', video_volume);
- $ghinda_volume_btn.removeClass('ghinda-volume-mute');
- } else {
- $gVideo.attr('muted', true);
- $ghinda_volume.slider('value', '0');
- $ghinda_volume_btn.addClass('ghinda-volume-mute');
- };
- };
- $ghinda_volume_btn.click(muteVolume);
好了,我们的插件功能已经全部完成了,调用方法:
- $('video').gVideo();
外观和体验
好的,现在到了比较有意思的部分,也就是播放器的外观和体验了。当插件功能已经完成后利用一点CSS就可以很容易地自定义样式了,我们将全部使用CSS3来实现。
首先,我们给播放器主容器加一些样式:
- .ghinda-video-player {
- float: left;
- padding: 10px;
- border: 5px solid #61625d;
- -moz-border-radius: 5px; /* FF1+ */
- -ms-border-radius: 5px; /* IE future proofing */
- -webkit-border-radius: 5px; /* Saf3+, Chrome */
- border-radius: 5px; /* Opera 10.5, IE 9 */
- background: #000000;
- background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
- background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
- box-shadow: inset 0 15px 35px #535353;
- }
- .ghinda-video-play {
- display: block;
- width: 22px;
- height: 22px;
- margin-right: 15px;
- background: url(../images/play-icon.png) no-repeat;
- opacity: 0.7;
- -moz-transition: all 0.2s ease-in-out; /* Firefox */
- -ms-transition: all 0.2s ease-in-out; /* IE future proofing */
- -o-transition: all 0.2s ease-in-out; /* Opera */
- -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
- transition: all 0.2s ease-in-out;
- }
- .ghinda-paused-button {
- background: url(../images/pause-icon.png) no-repeat;
- }
- .ghinda-video-play:hover {
- opacity: 1;
- }
现在轮到滑动块了,我们进度条和音量控制的滑动块的实现都是利用了jQuery UI的Slider组件,这个组件它本身自带了样式,定义在jQuery UI对应的css文件中,但是为了使滑动块和播放器其他控件外观保持一致我们全部重写了它的样式:
- .ghinda-video-seek .ui-slider-handle {
- width: 15px;
- height: 15px;
- border: 1px solid #333;
- top: -4px;
- -moz-border-radius:10px;
- -ms-border-radius:10px;
- -webkit-border-radius:10px;
- border-radius:10px;
- background: #e6e6e6;
- background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
- background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
- box-shadow: inset 0 -3px 3px #d5d5d5;
- }
- .ghinda-video-seek .ui-slider-handle.ui-state-hover {
- background: #fff;
- }
- .ghinda-video-seek .ui-slider-range {
- -moz-border-radius:15px;
- -ms-border-radius:15px;
- -webkit-border-radius:15px;
- border-radius:15px;
- background: #4cbae8;
- background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
- background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
- box-shadow: inset 0 -3px 3px #39a2ce;
- }
- .ghinda-volume-box {
- height: 30px;
- -moz-transition: all 0.1s ease-in-out; /* Firefox */
- -ms-transition: all 0.1s ease-in-out; /* IE future proofing */
- -o-transition: all 0.2s ease-in-out; /* Opera */
- -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
- transition: all 0.1s ease-in-out;
- }
- .ghinda-volume-box:hover {
- height: 135px;
- padding-top: 5px;
- }
- .ghinda-volume-slider {
- visibility: hidden;
- opacity: 0;
- -moz-transition: all 0.1s ease-in-out; /* Firefox */
- -ms-transition: all 0.1s ease-in-out; /* IE future proofing */
- -o-transition: all 0.1s ease-in-out; /* Opera */
- -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
- transition: all 0.1s ease-in-out;
- }
- .ghinda-volume-box:hover .ghinda-volume-slider {
- position: relative;
- visibility: visible;
- opacity: 1;
- }
自定义皮肤
可能您已经注意到,我们在编写插件的时候已经定义了一些默认选项,它们是theme和childtheme,可以在调用插件的时候根据需要方便的应用自定义皮肤。
这里解释下theme就是所有控件的一整套样式定义,childtheme就是在theme基础上重写某些样式,我们在调用插件的时候可以同时指定这两个选项或者其中的一个:
- $('video').gVideo({
- childtheme:'smalldark'
- });
总结
利用HTML5 video,JavaScript和CSS3打造自定义的视频播放器真的非常容易,t实现工具条功能用JavaScrip,外观和体验交给CSS3,我们得到了一个功能强大并且易于定制的解决方案!
enjoy!
转自:http://phperwuhan.blog.163.com/blog/static/41142602201201753739540/
HTML5+CSS3+JQuery打造自定义视频播放器的更多相关文章
- 使用CSS3+JQuery打造自定义视频播放器
简介 HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发 ...
- HTML5,CSS3 与 Javascript 制作视频播放器
早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑 ...
- HTML5视频(自定义视频播放器源码)
video对象 兼容情况: safari浏览器不支持webm格式 Chrome浏览器支持webm格式 ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的 Fire ...
- HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】
前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...
- 项目源码--IOS自定义视频播放器
下载源码 技术要点: 1. 视频播放器功能的实现 2. 视频文件的扫描与管理 3. Ipad UI的实现 4.源码详细的中文注释 ……. 详细介绍: 1. 视频播放器功能的实现 源码基于MediaPl ...
- HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
<HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- 仿写Windows7桌面和任务栏 HTML5+CSS3+Jquery实现
过去一段时间零零散散的自学了一点点jquery的相关用法,基本上属于用到哪个了,就去查然后就学一点,没有系统的学过,深入的用法也不是特别了解,毕竟javascript基础就比较薄弱.经过一段时间的零敲 ...
- Swift中使用MPMoviePlayerController实现自定义视频播放器界面
默认情况下播放器自带各种控制按钮,比如前进后退播放暂停等: var url = NSBundle.mainBundle().URLForResource("1", withExte ...
随机推荐
- PHP Fuzzing行动——源码审计
目录: Section 1: 20种PHP源码快速审计方式 Section 2: PHP源码审计自动化( PHP Fuzzer ) 风险级别: ■ Low ■ Medium ■ High 在开 ...
- hadoop2 作业执行过程之yarn调度执行
YARN是hadoop系统上的资源统一管理平台,其主要作用是实现集群资源的统一管理和调度(目前还不完善,只支持粗粒度的CPU和内存的的调配): 它的基本思想是将Mapreduce的jobtracker ...
- FOR XML PATH 解决联接返回结果集各记录问题
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- solr中通过SFTP访问文件建立索引
需求: 从oracle数据库中根据记录的文件名filename_html(多个文件以逗号隔开),文件路径path,备用文件名bakpath中获取 主机172.21.0.31上对应的html文件内容,并 ...
- iOS 网络/本地 图片 按自定义比例缩放 不失真 方法
我尝试了很多种方法,终于,设计了一个方法,能按自己规定的大小压缩 还没失真 如果以后不好用 我再升级 分享给大家: + (CGRect )scaleImage:(UIImage *)image toS ...
- nginx +lua +redis 构建自动缓存系统
一. nginx环境搭建 第一步下载 LuaJIT-2.0.4.tar.gz http://luajit.org/download/LuaJIT-2.0.4.tar.gz安装 make &&a ...
- 创建对象_原型(Prototype)模式_深拷贝
举例: 刚给我的客厅做了装修,朋友也希望给他的客厅做装修,他可能会把我家的装修方案拿过来改改就成,我的装修方案就是原型. 定义: 使用原型实例指定将要创建的对象类型,通过复制这 ...
- linux_jvm_jhat_dump内存分析
jhat命令 jhat命令 -- Java Head Analyse Tool 用途:是用来分析java堆的命令,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询 ...
- 关于Navicat Premium导入xlsx的问题
这段时间由于工作需要,频繁通过Oracle导入/导出大量数据,测试了很多软件,都不理想.PL/SQL Developer导入.导出都卡死:Oracle SQL Developer也是导入.导出都卡的半 ...
- 剑指Offer32 丑数
/************************************************************************* > File Name: 32_UglyNu ...