专栏首页腾讯大讲堂的专栏关于“吴亦凡入伍”H5背后的技术—兼容android【 前端篇】

关于“吴亦凡入伍”H5背后的技术—兼容android【 前端篇】

作者:nicky, 腾讯Tgideas 前端开发工程师

在“吴亦凡入伍”H5刷爆朋友圈之后,看到网上有较多同学对背后的技术感兴趣,正好借着机会跟大家分享一下。如果你正好也遇到在android下视频自动播放和两个视频连续播放(中间不需要触发)的问题,希望本文会对你有所帮助。

关于这个H5大概的实现原理,网上已经有人分析的很详细,我这里就不多做介绍了。

这次要分享是在兼容android下遇到的难点和兼容的思路:

第一个问题就是为了实现 Page1中里面图片中的人物要突然动起来,然后走出页面,那么video在初始化的时候就不能出现播放的icon,在IOS下设置一个poster就好了, 但在android下video对poster支持不是那么友好,加上会有千奇百怪的初始化播放效果:

在不设置controls下,video初始化android各平台的效果 (如下图)

解决方法其实很简单,就是在video上面覆盖一张图片(图片为视频的第一帧),当开始播放的时候,再隐藏这个图片来达到模拟poster的效果。这样做就引发另外一个问题,这个页面的video的宽度是自适应,意思就是宽度和高度会随着屏幕的宽度等比缩放,那么覆盖在video上面这个的高宽也不能是固定的,也要跟着video等比缩放。

这里我们就会用到保持元素宽高比的技巧,为元素添加的padding-top百分比值。因为padding取值百分比时候,是相对于包含块的宽度而定的。我们的视频1比例是580X386,所以padding-top的值为386/580=66.55%。实现代码如下:

第二个就是两个视频连续播放的问题(中间不需要触发)。

android下视频播放是需要用户主动触发的。用户主动触发行为比如:touch、click(注意:zepto的tap是触发不了),类似setInterval此类 或者touch之后setTimeout再播放,都是行不通的。

我们的需求是用户进到页面,当页面滚动一定高度之后,开始播放视频1,视频1播放完毕,不需要用户手动触发接着播放视频2。

转化到前端的逻辑:用户滚动页面一定高度之后,要连续播放视频1,2 中间用户是没有用户触发行为的。

解决思路: 当用户有触发行为时,就同时初始化视频1和视频2,给视频1添加ended事件,视频1播放完毕后就直接播放视频2 [v2.play()]

然而现实却很残酷(在android下会提示解析错误或者弹框让你选择文件打开方式)

既然上面的方法不行,那就用另外一种方法:当用户第一次触屏页面的时候去初始化视频2,然后等用户滚动页面一定高度的时候再去播放视频1,当视频1播放完毕,在回调里面直接播放视频2:

但这样还是会报错,我在想是不是canplay的事件发生的时候,video还没有初始化完成,但文档里面又找不到video初始化完成的API。

于是把逐个看似跟video初始化完成差不多的事件全都试了个遍,包括oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ontimeupdate... 结果统统都不行。

后来经过反复调试和测试,发现一个规律,把视频2在自带的控制条上手动触发播放,等开始播放之后,再手动暂定,然后再播放1,等视频1结束后调用视频2 是正常的,也不会报错。

基本上可以总结成一个规律:只要视频2已经播放过,哪怕一帧就行,这样当视频1播放完毕之后再play视频2,就是正常的!

好既然找出规律来,那么就好办了,怎么监视视频播放过呢?由于没有现成的api.只能用别的事件来控制了~

因为在之前已试过video的N多事件,这时候该 timeupdate 登场了。 文档解释是:当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。

逻辑就是只要有视频播放的时候,这个事件就会不断地被触发。当有了播放时间(currentTime>0)了,就说明已经播放过了,然后暂停它。等着再次被play();

兼容android尝试能不能只需要一次滚屏事件就完成这个交互,不过又掉进android里面的touchmove、touchend的坑里。

总结android下

一、不能存在两个初始化的video,会报错

二、没有用户主动触发行为,play()执行是无效的,但在该视频在已经被播放的情况下是可以不用用户主动触发直接Play()是可以的(必须是已经播放过,即使初始化完成,直接Play()也是不行的)。

最后关于兼容腾讯新闻app和IOS自带浏览器的问题在这里就不细说了。另外在某些iphone5和5S在safari下,如果当前页面的后面有全屏的视频,即使不显示,位置也不在视窗内。点击页面时会出现“点透”的BUG,页面上的任何触屏事件都捕获不到,就是触屏事件全被看不到的video抢去,解决方法就在video隐藏的时候设置 width:1px; height:1px; 等到播放的时候再设置成全屏的宽高。

本文分享自微信公众号 - 腾讯大讲堂(TX_DJT),作者:nicky

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 虚假新闻视频防不胜防?6招助你练出分辨真伪的火眼金睛

    在今年2月份的时候,有个视频火了:用AI技术将朱茵扮演的黄蓉换成杨幂的脸。 ? 视频里杨幂版黄蓉,一颦一笑,非常自然,若不是预先知晓这是经过处理的视频,不少...

    腾讯大讲堂
  • PPT限时领取 | 2019 GIAC 全球互联网架构大会蓄势来袭

    云计算、大数据、人工智能等技术正在和所有行业深度融合,传统行业的边界变得模糊。2017-2022年,是重要技术变革的5年,产业改革和消费升级会撼动原有规则,增...

    腾讯大讲堂
  • 深度学习重构视觉计算

    视频AI不仅需要建模图像的空间域信息,还需要建模视频帧之间的时间域信息。

    腾讯大讲堂
  • Android Jetpack: ViewModel | 中文教学视频

    Android Jetpack 是一系列助力您更容易打造卓越 Android 应用的工具和组件。这些组件能帮助您遵循最佳实践、免除编写繁复的样板代码并简化复杂任...

    Android 开发者
  • 学界 | 视频卡到天荒地老?MIT最新算法Pensieve让你观影畅通无阻

    大数据文摘
  • 视频号入口完全开放了,附如何申请开通微信视频号以及视频号申请流程和规则

    疫情发展影响着每个人,在特殊情况下,学生延期开学,员工延期上班,医护工作人员们奋战在一线。 我们能做的是不恐慌不传谣做好个人防护,不添乱就是在做贡献了。

    夏末浅笑
  • 60行Python代码打造自己的录屏软件(附源码)

    使用两个线程,一个使用pyaudio录音,一个使用pillow不停地截屏保存图片,最后再把音频和所有图片合成为视频文件。中间过程需要一定的硬盘空间。

    Python小屋屋主
  • 安装Android SDK Manager的“Failed to fetch refused”问题解决方法

    安装Android SDK Manager的“Failed to fetch refused”问题解决方法

    一见
  • 堆分配算法

    内存空间时的大小却是不一定的,从数个字到数个GB都是有可能的。于是我们必须将堆空间管理起来,将它分块地按照用户需求出售给最终的程序,并且还可以按照一定的方式收回...

    233333
  • 2019最新40K技能清单:聚焦Java开发工程师必知必会的进阶知识!

    作为Java工程师的你,平时工作已经很忙了,到底该如何进阶,才能快速提高薪资到45万甚至100万呢?分享一些过来人的经验,供大家参考以及文末还有免费的Java架...

    用户5546570

扫码关注云+社区

领取腾讯云代金券