自己的HTML5 播放器 - __constructor

标签: html5 播放器 constructor | 发表时间:2015-05-25 08:23 | 作者:__constructor
出处:

不知道写什么,主要也是自己水平实在是有限,想想自己会的东西都太基本,网上一搜往后不知道能数多少页,自己表达的也没有别人好。我希望自己写的东西要么是网上没有(可能性就是零……),要么是带着自己的见解。所以没有素材,还是自己踏踏实实学习比较靠谱,看的书越多,发现自己不会的也越多,但是太长时间不发东西出来又害怕自己丢失了写文章的习惯,所以凑数也要凑一篇!

开头讲了这么多,就是做了铺垫,这个HTML5播放器很水……就是为了凑一篇博文素材加上这是我第一个上传到github上的项目……

github地址:https://github.com/westAnHui/HTML5-Player

功能很普遍,这玩意又不难,先看截图,如果觉得丑就不用看了0.0

本文不包含介绍HTML5播放器这方面的API,那个网上一搜一大摞……

注意:上一个(左箭头),下一个(右箭头)、全屏还没写,未完成版……原谅我偷懒先放出来了,其他功能基本上都实现了

——————————————————————————————————————————————————————————————

很简单,几个基本的按钮,悬停按钮时发光用了border-radius和box-shadow配合,总进度条和音量进度条使用自定义拖拽

也有几点收获

比如:

box-sizing:border-box是真心的好用啊,特别对于有些在父级宽高未知,子元素需要填满,不过子元素自身有border和padding,这样无脑width或height设置为100%,那就超了~但是加上box-sizing:border-box世界就清静了~

transform:translate(-50%, -50%),这个也是棒的不行,偏移的50%是针对子元素本身的,不需要知道自己的宽高数值就可以。配合top:50%,left:50%,position:absolute立马达到垂直居中!,相比较margin:-(需要知道自己本身宽高再除2)%,方便了很多!

js是写在window.onload里面的

注意:如果不用window.onload,在DOM加载完毕之后直接跑的话,是读不到总视频时间的

video.duration的结果是undefined

视频和图片是一个性质嘛~无聊测试了一下本机环境下延迟40ms就可以读了,不过这毫无用处……

最后给个GIF


本文链接: 自己的HTML5 播放器,转载请注明。

相关 [html5 播放器 constructor] 推荐:

HTML5视频播放器总结

- - mo-Android
目前HTML5的各种应用在如火如荼的进行着,大家都在不断的尝试,尽管目前还没有优秀的产品出现,但是目前各方面的应用产品在层出不穷. 而我一直关注的HTML5视频播放这一块,应该说在国外是很火的,很多公司或者个人都在这推出自己的HTML5 视频播放器,详细的说明大家看下面这张图片:. 以上HTML5视频播放器,我也是使用了其中的2-3个,感觉比较好的还是Video JS,对我们开发人员来说很方便,网站有详细的文档说明,以及扩展说明等,播放器制作的很不错,很具有商业价值,下面给大家看一个我们使用的样例:.

自己的HTML5 播放器 - __constructor

- - 博客园_首页
不知道写什么,主要也是自己水平实在是有限,想想自己会的东西都太基本,网上一搜往后不知道能数多少页,自己表达的也没有别人好. 我希望自己写的东西要么是网上没有(可能性就是零……),要么是带着自己的见解. 所以没有素材,还是自己踏踏实实学习比较靠谱,看的书越多,发现自己不会的也越多,但是太长时间不发东西出来又害怕自己丢失了写文章的习惯,所以凑数也要凑一篇.

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

轻享音乐酷狗全新HTML5播放器低调发布

- - HTML5研究小组
近日老牌数字音乐厂商酷狗音乐推出了基于HTML5的手机端播放器,跨平台使用,且无需安装,手机浏览器输入相应网址(m.kugou.com)即可实现音频播放. 酷狗html5播放器主界面. 这是目前国内第一款基于HTML5的音乐播放器,更是在移动平台第一款利用浏览器播放而非采用传统App形式的播放器. 目前Android与iOS平台难分伯仲,几乎所有的移动App开发者都会基于双平台开发自己的应用软件.

10 个最佳 HTML5 音频播放器推荐

- - ITeye资讯频道
HTML5似乎无所不能,该技术正在逐步蚕食原本属于Flash的市场,并逐渐成为Web开发中的主流技术之一. 本文为你带来10款优秀的基于HTML5实现的音频播放器,你可以在Web项目中使用,为你的用户带来全新的体验. 你可以将本产品作为一个全功能的HTML5音频播放器(带播放列表),或者只是作为一个模块嵌入到你的网站中.

Sewise Player 2.5.2 发布,HTML5 视频播放器

- - 开源中国社区最新新闻
Sewise Player 发布了 2.5.2 版本,更新内容如下:. 1、增加primary参数,用于确定html5与flash播放的优先级. 2、HTML5模块加入draggable参数. 3、修复了在bootstrap框架中弹窗进度条错误的问题. 4、修复了Flash模块无法播放相对路径视频地址的问题.

深入分析js中的constructor 和prototype

- - 博客园_首页
在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性.

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

- - ITeye博客
日期:2013-5-22  来源: GBin1.com. 如果你希望开发一款支持响应式的HTML5播放器的话,. AudioPlayer.js是一个不错的选择. 它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面.

千千静听、foobar2000 神马的都素浮云,基于 HTML5 的浏览器版音乐播放器诞生

- Goingmm - Chrome迷
相信各位的电脑上都不会缺少音乐播放器这么个东西,虽然在线音乐已经非常发达,但这个东西仍然有市场. 但未来可能就不是这样了,音乐播放器完全可以由浏览器来取代,今天我们要介绍的这个就是一个还比较原始的浏览器版音乐播放器. 这个浏览器版播放器使用起来非常简单,只需要用一个支持 HTML5 的浏览器点击这个连接,然后浏览你存放在本地的音乐文件夹就可以,浏览器会自动快速的建立音乐索引让你可以直接在浏览器中享受音乐.

优秀的Android Podcast播放器

- Yao - Solidot
John Ryan 写道 "Podcast是通过互联网传播、分成多集播放的节目. 它包括了音频和视频文件,大多数Podcas文件可供下载. 术语podcasting最早是在2004年发明的,某些人可能会错误以为这种媒体需要苹果的iPod才能收听. Android Market 中有大量独立和集成的Podcast播放器,部分功能有限,部分开发还没完成.