早一段时间，有一直研究 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. asp.net弹出框后页面走样

    1.去掉language='javascript' ,问题依旧 2.后面加上Response.Write("<script>document.location=document. ...

  2. vertical-align:middle图片或者按钮垂直居中

    <img>或者button按钮 垂直不对齐,加上vertical-align:middle,就能垂直对齐,常用于水平布局的验证码图片 或者按钮 也适用于 text和button在一起也会不 ...

  3. WPF中添加Ribbon遇到的问题

    很奇怪的说,当我新建WPF工程,添加RibbonControlsLibary.dll后会运行时会报错,System.Windows.Markup.XamlParseException.引发的异常信息为 ...

  4. SQL技术内幕二DDL

    创建数据库: if db_id('DBTest') is nullcreate database DBTest 创建表 use eb_fy_data_test---use 切换所在数据库上下文 if ...

  5. CentOS安装mplayer

    据说mplayer相当于windows下的暴风影音,那么今天就来安装上mplayer. 安装的大体步骤: 安装mplayer需要安装,解码器,mplayer,皮肤. 这三个包你都可以在mplayer官 ...

  6. MySQL大数据量快速分页实现

    一般刚开始学SQL语句的时候,会这样写 代码如下:  SELECT * FROM table ORDER BY id LIMIT 1000, 10; 但在数据达到百万级的时候,这样写会慢死 代码如下: ...

  7. Linux下实现流水灯等功能的LED驱动代码及测试实例

    驱动代码: #include <linux/errno.h> #include <linux/kernel.h> #include <linux/module.h> ...

  8. mvc razor页面的邮箱校验

    由于@符号是razor中的关键字,而邮箱校验的正则表达式中需要使用@符号,所以在cshtml页面的代码中直接写js代码进行邮箱校验会报错. 解决方案: 将邮箱校验写在js文件中,在cshtml文件中引 ...

  9. C# - 接口，继承

    接口 接口是把公共实例(非静态)方法和属性组合起来,以封装特定功能的一个集合.不能像实例化一个类那样实例化接口.接口不能包含实现其成员的任何代码,而只能定义成员本身.实现过程必须在实现接口的类中完成. ...

  10. poj 3667 Hotel (线段树)

    http://poj.org/problem?id=3667 Hotel Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 94 ...