早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑到会比较花时间,所以一直没有做出完整的 Demo 。
刚好最近有灵感了,就下定决心做一个完整的视频播放器。首先放出成品:
做完这个播放器之后,感觉 HTML5 Video 提供的 API 已经很完善,考虑到一个播放器所需要的各个方面了,只是有些 API 还不被现代浏览器支持,但已被现代浏览器广泛支持的 API 已经足够 WEB 开发者很方便地开发出一个视频播放器了。
最后是完整 Demo ,这次坚持用原生 Javascript 去写,写得比较松散,不过没有了用 JS 库的臃肿,感觉还是不错的!完整代码很长,文章中就不贴代码介绍了,有兴趣的可以查看 Demo 。
本文由 Kayo Lee 发表,本文链接:https://kayosite.com/html5-css3-javascript-video-player.html
评论列表
在视频上点右键还可以显示播放控件。
@一堵墙 这是每个浏览器自带的,基本每个浏览器有自己的方式实现那个控件,比较原生的玩意,不想动它呢!
超级简洁~赞!
@野蛮人 打算用在这个博客上的,喜欢就好!
@Kayo 期待
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 播放器!
非常厉害啊
自己折腾一下的东东,喜欢就好!
速度与激情,哈哈
标题很好地概括了内容!
在這裡總能學習到代碼相關的內容,感謝
其实只是分享一下自己的心得,如果能对别人有帮助,那还真是不错哈!
生命折腾不止,最近虽然更新博客,但是折腾了很多,以后写文章再说说!
很漂亮,怎么实现的啊?HTML5一定是今后的方向。
其实就是调用 HTML5 video 的 api ,可以看看源码,有注释的,具体的实现就不细说了!
效果不错 好久不来了 应该快开学了吧
是的,开学了,不过在实习,都没有回去上课了!