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

评论列表

  • 评论者头像
    回复

    好久不来 是不是快毕业了

  • 评论者头像
    回复

    就是某些浏览器支持不是很好啊

    • 评论者头像
      回复

      @IT小蜗牛 其实是 IE 下基本都不支持,所以如果你的网站需要做兼容 IE 的视频,这个就不适用了!

  • 评论者头像
    回复

    很不错的 HTML5播放器!

    • 评论者头像
      回复

      @微Fan 谢谢支持,播放器还有改进的地方呢,会继续完善的!

  • 评论者头像
    回复

    博主最近在哪里高就呢?

  • 评论者头像
    回复

    博主,能否指导一下,我如何在web页面上实时显示 视频播放的一些参数,比如,当前帧、抖动、丢包 什么的

  • 评论者头像
    回复

    博主我是初学者。考试要做网页。我想做这个视频播放。但是你这个DEMO我下载之后效果与网页上效果不一样。下载之后有两个css文件一个js文件和一个html文件。是不是我哪里弄错了

  • 评论者头像
    回复

    你好,我想问这个demo怎么下载?最近在做项目需要获取视频时间并显示 我用谷歌开发者工具Resources查看代码并按照代码写 发现实现不了获取视频时间显示

  • 评论者头像
    回复

    咋下载呢?

1 2 3

回复

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