早一段时间，有一直研究 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. C++中const修饰基本数据类型、指针、引用、对象

    const修饰基本数据类型 #include <iostream> using namespace std; void main(){ const int a = 1; const cha ...

  2. iOS网络编程总结

    好长时间没有进行更行了,最近学到AFNetworking框架,在学习完成之后做出一个总结 1.第三方网络的框架 AFNEtworking使用简单,对最新的iOS特性都有很好的支持,对NSURL进行了封 ...

  3. GDI+ 如何将图片绘制成圆形的图片

    大概意思就是不生成新的图片,而是将图片转换为圆形图片. 实现代码如下: private Image CutEllipse(Image img, Rectangle rec, Size size) { ...

  4. 今日吐槽20151208.net服务器控件

    正文 今天有个小任务是给页面添加一个搜索条件,复选框多选.因为页面都是服务器控件,我也只能用服务器控件配合了.然后给页面加了一个  CheckBoxList  控件.后台通过数据表加载数据. fore ...

  5. win7定时任务

    最近某app有个小抽奖,每天点击太麻烦,想做个定时任务访问抽奖链接(带着cookie登录信息,即可抽奖成功) 刚开始做了php,最后发现部署在百度bae中没法做定时任务每天执行,后来换成了python ...

  6. 使用ajaxFileUpload实现异步上传图片

    index.html <head runat="server"> <title></title> <script src="jq ...

  7. 【转】iOS 9自带苹果式省电模式 依然软硬兼施

    非本人总结,转自:http://news.91.com/apple/1506/21837672.html 说好的改善和优化,iOS 9真的带来了.且不说那些经过改善的功能,iOS 9 推出的低功耗模式 ...

  8. 蜗牛历险记(二) Web框架(中)

    上篇简单介绍了框架所使用的Autofac,采用Autofac提供的Ioc管理整个Web项目中所有对象的生命周期,实现框架面向接口编程.接下来介绍框架的日志系统. 一.介绍之前 框架日志是否有存在的必要 ...

  9. 渲染统计窗口(Rendering Statistics Window)

    FPS(Timer per frame and FPS) frames per seconds表示引擎处理和渲染一个游戏帧所花费的时间,该数字主要受到场景中渲染物体数量和GPU性能的影响,FPS数值越 ...

  10. 常用DOS命令参数详解

    一.DIR命令的格式: dir [D:][PATH][NAME][[/A][:attrib]][/o:[sorted][/s][/b][/l][/c[h] (1)dir /a:attrib 缺省包含所 ...