自个的HTML5 播放器-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:245回复:0

  自个的HTML5 播放器

楼主#
更多 发布于:2016-06-19 12:16



 不知道写啥,首要也是自个水平实在是有限,想想自个会的东西都太根本,网上一搜往后不知道能数多少页,自个表达的也没有别人好。我期望自个写的东西要么是网上没有(可能性即是零……),要么是带着自个的见地。所以没有资料,仍是自个踏踏实实学习对比靠谱,看的书越多,发现自个不会的也越多,可是太长时刻不发东西出来又惧怕自个丢掉了写文章的习气,所以凑数也要凑一篇!

最初讲了这么多,即是做了衬托,这个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








优质IT资源分享社区为你提供此文。
本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客