自己的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 播放器 - __constructor

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

HTML5视频播放器总结

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

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

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

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

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

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

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

HTML5 API---使用WebAudio API播放音频文件

- - CSDN博客移动开发推荐文章
WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度. 现在如果采用WebAudio来播放音频文件就不会有该限制,开发者可以任意控制音频文件的播放和停止,这对移动平台的上游戏开发者而言尤为重要.

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

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

Youtube网站正式全面使用HTML5<video>播放视频

- - WEB骇客
四年前,Youtube官方曾宣布在网站上 实验性的支持HTML5<video>标记,测试它跟使用Flash对比的效果. 当时,由于诸多的限制,无法将这种技术广泛的运用到视频播放中. 最重要的原因是,HTML5缺乏对Adaptive Bitrate (ABR)的支持,这种技术能让视频进行少量的缓冲就能播放.

移动端 HTML5 video 视频播放实践

- - JDC | 京东设计中心
移动端 HTML5 使用原生 <video> 标签播放视频,目前正被广泛的使用,虽然在各个平台上存在各种各样的兼容问题,给开发者带来不小的障碍,不过根据前人的经验,我们还是能从中找到蛛丝马迹来解决在开发中遇到的问题. 此篇文章,主要是总结我在项目中遇到的一些坑,也为后面的小伙伴在使用 video 标签时,提供一些思路和方法.

预览文章: HTML5 视频播放事件属性与API控件

- - BlogJava_首页
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了. 视频格式:avi、rmb、wmv、mpeg4、ogg、webm. 视频主要有三部分组成:视频、音频、编码格式.