早一段时间，有一直研究 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. ImageButton如何让图片按比例缩放不被拉伸

    了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...

  2. linux shell编程学习笔记(一)---通配符，元字符

    linux通配符: 通配符是由shell处理的(不是由所涉及到命令语句处理的,其实我们在shell各个命令中也没有发现有这些通配符介绍), 它只会出现在 命令的“参数”里(它不用在 命令名称里, 也不 ...

  3. Android - 安装 windows 7 安装 Android SDK 的时候出现的问题！(Connection to https://dl-ssl.google.com refused)

    Android - 安装 windows 7  安装 Android SDK 的时候出现的问题! 首先看到 Connection to https://dl-ssl.google.com refuse ...

  4. Mac OS X平台上Java环境的配置

    最近换了工作,以前是做c/c++的,但是现在公司的主打产品是使用Java开发,为了以后维护代码,现在开始抽空学习一下Java相关的内容. 在学习之前,首先需要搭建各种平台的开发环境,而我选用的操作系统 ...

  5. C#获取运行程序的进程ID

    C#获取运行程序的进程ID [DllImport("User32.dll", CharSet = CharSet.Auto)] public static extern int G ...

  6. A-Frame 简介03

    如果你想开始使用A-Frame可以通过以下几种方式: Play with CodePen Grab the Boilerplate Include the JS Build Install from ...

  7. 解决IE6下Position：fixed问题(只用css)

    在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...

  8. 【python】迭代一列 斐波那契数列

    def fabm(n): if n < 1: print('输入不能小于1') return -1 if n == 1 or n == 2: return 1 else: return fabm ...

  9. 机器学习实战——k-近邻算法

    本章内容 ================================ (一)什么是k-近邻分类算法 (二)怎样从文件中解析和导入数据 (三)使用Matplotlib创建扩散图 (四)对数据进行归 ...

  10. PL/SQL — 集合及常用方法

    PL/SQL中提供了常用的三种集合联合数组.嵌套表.变长数组,而对于这几个集合类型中元素的操作,PL/SQL提供了相应的函数或过程来操纵数组中的元素或下标.这些函数或过程称为集合方法.一个集合方法就是 ...