本文摘自PHP中文网,作者黄舟,侵删。
最近我们前端这边搜集了50个比较优秀的H5。那我这边呢,根据技术的分类,找出其中十个有代表性的案例,给大家解析一下他们技术的实现方案。
设计师也可以根据技术实现作为你们提供的素材参考
因为我主要是对技术分类的介绍,所以只取了不同技术实现的案例,同一种技术实现的不同的设计风格我就不列举出来了。
首先稍微提一下,其中包含的技术主要分为:createjs/thresjs/video内联播放/
首先第一个呢,是之前腾讯爸爸出品的腾讯动漫的一个APP宣传的H5,这个H5是由腾讯内的TGideas团队完成的
以下是TGideas的官方介绍
TGideas隶属于腾讯互动娱乐业务系统,是一支专注于运营和营销领域的用户体验设计团队,工作范围涉及产品包装、广告创意、品牌建设、互动设计等,团队由专业的企划、项目管理、创意、视觉、开发、多媒体人才构成。“努力工作,拼命玩”是我们的信条,比起用飞机稿获奖,我们更乐于通过多样化的作品,帮助产品与用户建立有效的沟通机制与情感链接,实现真正意义上的商业价值。
OK,说到TGideas这里就顺便介绍一下腾讯的另一个团队简称ISUX,这两个团队是我所了解到对H5这方面做的比较优秀的两个腾讯的团队,他们团队中的组成也是设计+前端
腾讯社交用户体验设计,简称ISUX (Internet Social User Experience),成立于2011年1月11日,是腾讯集团核心、全球最具规模的UX设计团队,专业成员包括用户研究、交互设计、视觉设计、品牌设计、视频动画设计、UI开发、产品设计与市场研究等,至今ISUX分布于中国深圳总部、北京、上海、成都及韩国首尔。
ISUX主要负责腾讯社交通讯与娱乐类产品服务的用户体验设计与研究,包括主要服务平台如QQ、QQ空间、QQ会员、QQ钱包、QQ运动、腾讯云、腾讯企点、QQ物联、腾讯课堂、兴趣部落、花样直播、全民K歌、全民影帝、企鹅FM、闪咖、天天P图、微云和来电等。
这两个是所接触的比较擅长输出H5的两个团队
video+js的案例
OK,然后大家扫一下二维码看一下第一个案例。
从技术使用上,这个页面使用了javascript脚本对视频的控制。
主要需要解决的问题是
默认情况下在浏览器上添加视频是全屏然后出现控制条
还有微信浏览器安卓系统打开强制全屏的问题
在IOS下的解决方法:
微信浏览器中可以增加一个内联属性,使得视频在页面内联播放而不全屏。
但是安卓端若需要使用这个属性,需要在浏览器白名单内才能使用。
但是微信X5浏览器官方没有提供申请白名单的入口。
所以我们只能换一种实现办法
在后来TBS 内核(>=036849)的版本的X5浏览器中,
支持一个叫同层播放器的东西,可以使安卓端微信在视频全屏的情况下在视频的上一层添加东西
1 2 3 4 5 6 7 8 9 10 |
|
那么基于全屏视频上面加一些东西可以做什么事情呢?
相关阅读 >>
HTML5 menu标签的具体定义和HTML5menu标签的用法详细解析
HTML5与html的区别有哪些?HTML5与html四大区别总结
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者