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

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

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

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

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

完整 Demo

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

评论列表

  • 评论者头像
    回复

    在视频上点右键还可以显示播放控件。

    • 评论者头像
      回复

      @一堵墙 这是每个浏览器自带的,基本每个浏览器有自己的方式实现那个控件,比较原生的玩意,不想动它呢!

  • 评论者头像
    回复

    超级简洁~赞! :wink:

  • 评论者头像
    回复

    chrome 28.0.1500.72 m 无法播放额

    • 评论者头像
      回复

      @牧风 我的是 1500.71 m ,播放木有问题喔,可能是网速问题,这个视频比较清晰,然后我木有做检测是否加载良好,网速低的时候就播不了!

  • 评论者头像
    回复

    感觉video的全屏api最坑爹了, 各个浏览器不一样, ie还不支持

    • 评论者头像
      回复

      @牧风 是的,而且 FIrefox 和 Opera 还直接弹对话框告知用户 ESC 可以退出,体验很不好。所以我自己写了全屏的功能,不用它的 API 了!

  • 评论者头像
    回复

    感觉十分不错

    • 评论者头像
      回复

      哈哈,欢迎试用!

  • 评论者头像
    回复

    速度与激情6已经看完了耶。。等待bd下载留念

    • 评论者头像
      回复

      确实很精彩,值得HD保存了!

  • 评论者头像
    回复

    IE 10 无法播放额

    • 评论者头像
      回复

      HTML5 Video 还是处于发展阶段,因此浏览器之间兼容差异很大,暂时上面的播放器只支持 Chrome,Firefox 这类现代浏览器!

  • 评论者头像
    回复

    0-4s循环,无声无图像
    safari 605

    • 评论者头像
      回复

      不支持 safari ,后续再完善吧!

  • 评论者头像
    回复

    这个不错,但不是所有浏览器都完美支持,我不喜欢flash播放器

    • 评论者头像
      回复

      嗯嗯,现在还是处于实验阶段,这能等待发展了,我也很讨厌 flash 播放器!

  • 评论者头像
    回复

    非常厉害啊

    • 评论者头像
      回复

      自己折腾一下的东东,喜欢就好!

  • 评论者头像
    回复

    速度与激情,哈哈

    • 评论者头像
      回复

      标题很好地概括了内容!

  • 评论者头像
    回复

    在這裡總能學習到代碼相關的內容,感謝

    • 评论者头像
      回复

      其实只是分享一下自己的心得,如果能对别人有帮助,那还真是不错哈!

  • 评论者头像
    回复

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

    • 评论者头像
      回复

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

  • 评论者头像
    回复

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

    • 评论者头像
      回复

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

  • 评论者头像
    回复

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

    • 评论者头像
      回复

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

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail