- 浏览: 308472 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
简介
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作为父容器:
打包成jQuery插件
创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的,正如前面提到的一样我们将我们的播放器打包成jQuery插件,这样可以很好的实现复用,代码如下:
为了创建进度条的拖动块,我们使用了jQuery UI的Slider组件:
至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能:
好了,我们的插件功能已经全部完成了,调用方法:
外观和体验
好的,现在到了比较有意思的部分,也就是播放器的外观和体验了。当插件功能已经完成后利用一点CSS就可以很容易地自定义样式了,我们将全部使用CSS3来实现。
首先,我们给播放器主容器加一些样式:
现在轮到滑动块了,我们进度条和音量控制的滑动块的实现都是利用了jQuery UI的Slider组件,这个组件它本身自带了样式,定义在jQuery UI对应的css文件中,但是为了使滑动块和播放器其他控件外观保持一致我们全部重写了它的样式:
自定义皮肤
可能您已经注意到,我们在编写插件的时候已经定义了一些默认选项,它们是theme和childtheme,可以在调用插件的时候根据需要方便的应用自定义皮肤。
这里解释下theme就是所有控件的一整套样式定义,childtheme就是在theme基础上重写某些样式,我们在调用插件的时候可以同时指定这两个选项或者其中的一个:
总结
利用HTML5 video,JavaScript和CSS3打造自定义的视频播放器真的非常容易,t实现工具条功能用JavaScrip,外观和体验交给CSS3,我们得到了一个功能强大并且易于定制的解决方案!
enjoy!
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1364转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14711.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10531 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1285One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1445版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1182你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1971本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 1015本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2904本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1559本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1217JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1420本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 751css中display属性的参考值: display:n ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1142设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 1045在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7522超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1071Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 773В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1405html5 代码: <video width ... -
22个HTML5的初级技巧
2011-05-06 11:45 725Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。 ...
相关推荐
本文将深入探讨这些技术,并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目,分析它们在实际应用中的作用。 首先,HTML(HyperText Markup Language)...
通过以上步骤,我们可以构建出一个功能完善的HTML5、CSS3和jQuery自定义video播放器。这个项目不仅展示了这些技术的实际应用,也锻炼了开发者在网页交互设计和用户体验优化方面的能力。在实际开发中,还可以根据需求...
HTML5、CSS3和jQuery Mobile是现代Web开发的三大核心技术,它们共同为构建功能丰富的APP和移动网站提供了强大的工具集。HTML5作为超文本标记语言的最新版本,引入了诸多新特性,旨在提升网页的交互性和表现力;CSS3...
在IT行业中,HTML5、CSS3和JavaScript是构建现代网页应用的基础,而jQuery则是JavaScript库中的佼佼者,极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇文章将深入探讨这些技术,尤其是jQuery的基础知识...
在这个“HTML5+CSS3+jQuery制作个性注册表单代码”项目中,开发者利用这些技术构建了一个功能完备且具有个性化设计的注册表单。 HTML5作为最新的超文本标记语言版本,引入了许多新特性,比如语义化元素(如、、和)...
**jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中,下拉菜单是一种常见的交互元素,用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作,结合CSS3的动画效果和HTML5的新特性,构建出一种...
动态网页设计与制作是互联网开发领域中的核心技能之一,它涉及到HTML5、CSS3和JavaScript等关键技术。这些技术的结合使得网页不仅具有丰富的视觉效果,还能实现交互性和动态功能。以下将详细介绍这些知识点: HTML5...
在“HTML5+CSS3设计网站模板”中,这两者结合,可以实现动态效果、响应式布局以及丰富的交互性,使得网站在不同设备和浏览器上都能呈现出一致的优质用户体验。 首先,HTML5引入了新的元素,如、、、和等,这些元素...
这个“HTML5+CSS3视频播放器”项目显然展示了如何利用这两者来构建一个自定义的、功能完备的视频播放器。 HTML5引入了内置的媒体元素`<video>`,它允许开发者直接在网页上嵌入视频内容,而无需依赖Flash等外部插件...
网页开发是互联网时代的核心技能之一,涵盖了HTML、CSS、JSP和jQuery等多个关键领域。这些技术结合使用,能够创建功能丰富、交互性强的动态网页。下面是对这些技术的详细解释和知识点总结: **HTML(超文本标记语言...
在“html5+css3圆角图文展示卡片层叠滑动切换特效.zip”这个压缩包中,我们可以看到一个利用这两种技术实现的动态展示卡片的特效。这种特效通常用于产品展示、信息分类或者新闻滚动等场景,可以吸引用户注意力,提高...
在“html5+css3图片幻灯片切换代码.zip”这个压缩包中,我们可以预见到一个利用这两项技术实现的图片幻灯片切换效果。下面将详细介绍这个效果的实现原理和相关知识点。 首先,HTML5引入了一些新的元素,如`<figure>...
本资源提供了“15种html5+css3图片堆叠图片展示特效”,这是一种创新的图片展示方式,它将图片以扑克牌堆叠的形式呈现,初始状态仅显示一张图片,通过交互(如点击按钮)可以展开成多张,增强了用户体验和视觉吸引力...
在这个“HTML5+CSS3图片选中列表”项目中,结合JavaScript库jQuery,我们可以实现一个高效且用户体验良好的图片选中系统。以下是关于这个项目的一些关键知识点: 1. HTML5新特性: - `data-*`属性:用于在HTML元素...
技术栈:html5+css3+jquery+bootstrap 网站特色: 100%流体响应 清洁代码 在真实设备上测试 灵活的布局 无限侧边栏 平面、现代和干净的设计。 清洁和注释代码 自定义字体支持 建立在Bootstrap5上 HTML5 和 CSS3 文件...
在这个"HTML5+CSS3实现的列表式音乐播放器特效源码"项目中,我们可以深入探讨这两者如何协同工作,构建出一个交互性强、功能全面的音乐播放器。 首先,HTML5(HyperText Markup Language第五版)是网页内容结构的...
本资源"HTML5+CSS3超酷动态表单 HTML5+CSS3超酷动态表单网页特效.zip"显然是一个包含一系列使用这两种技术实现的创新表单设计和交互效果的集合。 首先,我们来详细了解一下HTML5在动态表单中的应用。HTML5引入了新...
在"jQuery+css3水平悬停动画"中,HTML5元素可能用于构建布局和结构,使得动画能够正确地与页面内容结合。 JavaScript和jQuery的结合使用,使得开发者可以精确控制动画的执行时机和方式。例如,可以使用jQuery的`....
"Web端点餐系统(HTML5 + CSS3 + JS(jQuery)).zip" 这个标题揭示了我们正在处理一个基于Web的在线点餐系统的实现,该系统利用了现代Web开发技术,包括HTML5、CSS3以及JavaScript的jQuery库。这个系统可能是作为毕业...