早一段时间，有一直研究 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. OpenJudge / Poj 2141 Message Decowding

    1.链接地址: http://poj.org/problem?id=2141 http://bailian.openjudge.cn/practice/2141/ 2.题目: Message Deco ...

  2. OpenJudge/Poj 1125 Stockbroker Grapevine

    1.链接地址: http://poj.org/problem?id=1125 http://bailian.openjudge.cn/practice/1125 2.题目: Stockbroker G ...

  3. Linux之在CentOS上一次艰难的木马查杀过程

    今天朋友说他一台要准备上线的生产服务器被挂马,特征ps命令找不到进程,top能看到负载最高的一个程序是一个随机的10位字母的东西,kill掉之后自动再次出现一个随机10位字母的进程. 我让他关闭这个机 ...

  4. linux下面的查找

    locate:     速度快     不是实时的,每天定时执行把结果导入数据库     模糊匹配     updatedb  --手动生成文件数据库,执行时间较长   find:     实时查找 ...

  5. Linux---vi编辑器必会操作

    移动光标: (1)基本的上下左右:通过箭头按键控制 (2)跳到一行的末尾:键盘"end" (3)跳到一行的开头:键盘"home" (4)跳到最后一行:shift ...

  6. [转] Js获取 本周、本月、本季度、本年、上月、上周、上季度、去年时间段

    /** * 针对时间的工具类 */ var DateTimeUtil = function () { /*** * 获得当前时间 */ this.getCurrentDate = function ( ...

  7. [HTML]marquee标签属性详解

    请大家先看下面这段代码:<marquee direction=upbehavior=scrollloop=3scrollamount=1 scrolldelay=10align=topbgcol ...

  8. windows 系统下，小数据量Oracle用户物理备份

    环境:windows Server 2003 oracle 10g,系统间备份 目标系统创建共享文件,原系统挂载共享目录 写批处理脚本,用任务计划定时调用 Rem * 由于系统实时性要求不是很高,数据 ...

  9. eclipse:java.lang.OutOfMemoryError: PermGen space 最简单的解决方式

    我使用的工具是STS, Eclipse同理: 打开如下界面: 左则选择项目启动使用的Tomcat-->在右侧面板Tab项中选择" Arguments":在VM argumen ...

  10. ee_15_mvc_db_page----demo---bai

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...