早一段时间，有一直研究 HTML5 和 CSS3 ，自己也做了不少 Demo ，只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器，因此特别想做一个自己喜欢的设计，考虑到会比较花时间，所以一直没有做出完整的 Demo 。

刚好最近有灵感了，就下定决心做一个完整的视频播放器。首先放出成品：

做完这个播放器之后，感觉 HTML5 Video 提供的 API 已经很完善，考虑到一个播放器所需要的各个方面了，只是有些 API 还不被现代浏览器支持，但已被现代浏览器广泛支持的 API 已经足够 WEB 开发者很方便地开发出一个视频播放器了。

最后是完整 Demo ，这次坚持用原生 Javascript 去写，写得比较松散，不过没有了用 JS 库的臃肿，感觉还是不错的！完整代码很长，文章中就不贴代码介绍了，有兴趣的可以查看 Demo 。

完整 Demo

HTML5,CSS3 与 Javascript 制作视频播放器的更多相关文章

  1. HTML5+CSS3+JQuery打造自定义视频播放器

    来源:http://www.html5china.com/HTML5features/video/201109206_1994.html 简介HTML5的<video>标签已经被目前大多数 ...

  2. 使用CSS3+JQuery打造自定义视频播放器

    简介 HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发 ...

  3. PyQT制作视频播放器

    Python应用03 使用PyQT制作视频播放器   作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tki ...

  4. 7款Flash和Javascript网页视频播放器

    Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...

  5. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  6. 使用ALVideoPlayerSurface制作视频播放器

    头两天介绍了开源控件包alcinoe,现在利用其中的ALVideoPlayerSurface视频播放控件,实作一个视频播放器. 首先,建一个fmx项目,然后从组件面版,拖放一个TAlVideoPlay ...

  7. Python编程使用PyQT制作视频播放器

    最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放 ...

  8. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  9. html5+css3酷炫音频播放器代码

    1. [代码][JavaScript]代码         (function($){    jQuery.fn.extend({        "initAudio" : fun ...

随机推荐

  1. ajax、json一些整理（1）

    1.请求text数据,在success事件中手动解析 前台:                 $.ajax({                     type: "post", ...

  2. H5发展简介

    HTML4.01 超文本标记语言,1999年12月24日由W3C组织发布. XHTML 扩展的超文本标记语言(eXtensible Hyper Text Markup Language),和HTML4 ...

  3. linux下tomcat的安装

    本文主要内容: (1)安装apr,这是 Apache 为了提升 Tomcat 的性能搞的一套本地化 Socket, Thread, IO 组件也就是说它有高级 IO 功能, 操作系统级别的功能调用, ...

  4. 细说PHP中strlen和mb_strlen的区别

    在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别.下面通过例子,讲解这两者之间的区别. $str='中文a字1符'; ec ...

  5. json在线校验

    弄了一个在线校验,清爽无广告,欢迎大家收藏   http://www.zhhoney.com/

  6. hdu 3336 Count the string KMP+DP优化

    Count the string Problem Description It is well known that AekdyCoin is good at string problems as w ...

  7. linq query, using int.parse to convert varchar to int while orderby

    var t = from x in context.NewsLetterItem.ToList() //add .ToList at this place where x.APPId == appid ...

  8. Net中的AOP

    .Net中的AOP系列之<单元测试切面>   返回<.Net中的AOP>系列学习总目录 本篇目录 使用NUnit编写测试 编写和运行NUnit测试 切面的测试策略 Castle ...

  9. user is not mapped

    用Hibernate实现一个用户的登陆过程,当我在JSP的登陆页面输入姓名和密码,点登陆后,显示登陆失败页,在服务器里显示如下的错误信息:  org.hibernate.hql.ast.QuerySy ...

  10. [转载]Asp.net MVC2 与 MVC3 路由调试好帮手RouteDebug 与 RouteDebugger

    RouteDebug 与 RouteDebugger是什么? 在Asp.Net MVC程序中,路由(Route)是一个非常核心的概念,可以说是MVC程序的入口,因为每一个Http请求都要经过路由计算, ...