HTML5,CSS3 与 Javascript 制作视频播放器

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

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

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

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

完整 Demo

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/html5-css3-javascript-video-player.html

评论列表

  • 评论者头像
    回复

    :wink: 写的很给力~激情澎湃,看着你的折腾我也突然有动力了~ :idea: 最近真是懒的要命~

    • 评论者头像
      回复

      生命折腾不止,最近虽然更新博客,但是折腾了很多,以后写文章再说说!

  • 评论者头像
    回复

    很漂亮,怎么实现的啊?HTML5一定是今后的方向。

    • 评论者头像
      回复

      其实就是调用 HTML5 video 的 api ,可以看看源码,有注释的,具体的实现就不细说了!

  • 评论者头像
    回复

    效果不错 好久不来了 应该快开学了吧

    • 评论者头像
      回复

      是的,开学了,不过在实习,都没有回去上课了!

  • 评论者头像
    回复

    在博客上放视频文件会不会导致流量大增超标?

    • 评论者头像
      回复

      绝对会的,所以要慎重放视频,最好压缩一下!

  • 评论者头像
    回复

    最近忙啥呢

    • 评论者头像
      回复

      忙工作,自己也在折腾 js !

  • 评论者头像
    回复

    最近这么久没更新了

    • 评论者头像
      回复

      各种忙,不过其实是有在写博客的,有时间整理一下就会发表好几篇喔!

  • 评论者头像
    回复

    嗯,博主强悍啊

  • 评论者头像
    回复

    难得有这么一个长假,无论工作多么繁忙,该给自己一个借口休息下了。
    祝站长国庆节快乐,工作顺利,一切顺心。
    海棠果

  • 评论者头像
    回复

    果断下载个。晚上来玩玩。

  • 评论者头像
    回复

    楼主强大!顶一下,
    可以借到我的网页用吗?

  • 评论者头像
    回复

    这功能貌似很好啊

  • 评论者头像
    回复

    很不错的东西,和flash播放器比起来,应该各有优劣吧。。。

    • 评论者头像
      回复

      @我爱奇迹 是的,html5 video 和 flash 相比各有优势,html5 无需插件支持,性能更好,开发方便,尤其是在移动设备上无论是 flash 播放器容易出现的跳帧以及耗电严重等问题都明显减轻,但 html video 不被 IE8 及以下版本支持,flash 则具有很好的支持!

1 2 3

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O