本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。
在企鹅辅导品牌页中,我们需要实现一个动画如下:
页面滚动到动画区域,播放动画, 对应动画部分如下:
帧动画当前的实现有以下几种方式:
GIF 动画适用于处理色彩简单、动效简单的动画,如 logo 、 icon 图这样的小图动画,在上面需要实现的动画中明显细节比较多,区域也比较大,考虑到质量 GIF 排除在外
在使用哪种方式实现该动画上,结合同事 @ajaxchen 的调研结论:
查看 video 标签的兼容性,无论是我们品牌页的 PC 版还是移动 web 端,兼容性都可以满足我们的需求
设计小哥哥给到的动画 MP4 视频大小是 350k, 350k对比几十兆简直就是轻量,查了一番 video 的自动播放实现,有一些坑,跟设计师小哥哥也沟通了一番综合考虑之后毅然踩上了 video 的坑
video 标签有对应的事件方法, 可查阅文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events
下面是在移动端 web 使用 video 过程中的采坑总结:
<video muted />
<video
muted
playsInline
webkit-playsinline="true"
/>
video.play()
.then(() => {
// play success
})
.catch( err => {
// auto play fail
})
当 catch 到 error 时,只能启用兼容方案,设计小哥哥给了我几张帧图片,让我渐隐渐现实现图片播放。
然而!在华为荣耀 8 的微信里面,我发现了个诡异的问题,视频没有播放,同时 video.play 没有 catch 到 error,而是正常的执行到了 then 方法,也就是说 play 方法返回成功,然而视频实际没有播放,这,这, 这, 是在欺骗我的感情!
无奈之下, 针对安卓的微信端,视频全部启用兼容模式(几张图片渐隐渐现)
这个 video 我是设置了循环播放的,硬生生 QQ 浏览器就在视频播放完毕后展示推荐视频,并且停止了我的循环播放,这让我的页面显的有点 low, 这明显是不仁道的,尝试无果之后,于是我咨询 QQ 浏览器的同事帮忙这个问题, 他让我在 video 标签上加上这个属性,即可使用系统播放器,而拒绝被拦截植入推荐视屏, 感谢@eddiecmchen 提供的意见
mtt-playsinline=”true“
至此附上实现的部分代码块,项目使用 react 技术栈
<video
muted
src="***"
preload="auto"
playsInline
webkit-playsinline="true"
mtt-playsinline="true"
loop
ref={this.videoRef}
/>
playVideo = () => {
const { isVideoCanAutoPlay, isPlayedVideo } = this.state;
// 播放视频
const videoDom = this.videoRef.current;
if (videoDom && !isPlayedVideo && isVideoCanAutoPlay) {
const playPromise = videoDom.play();
if (playPromise) {
playPromise
.then(() => {
this.setState({
isPlayedVideo: true,
});
})
.catch((err) => {
badjs.info(`[品牌页][AI VIDEO 动画]: 自动播放出错 ${err}`);
++this.catchVideoErrorCount;
// 通过点击和scroll后都无法播放视屏,使用兼容性方案
if (this.catchVideoErrorCount >= 2) {
this.setState({
isVideoCanAutoPlay: false,
});
}
});
}
}
};
最后总结:
参考文档和网站:
感谢在此次采坑过程中给予帮助的同事~
IMWeb 团队隶属腾讯公司,是国内最专业的前端团队之一。
我们专注前端领域多年,负责过 QQ 资料、QQ 注册、QQ 群等亿级业务。目前聚焦于在线教育领域,精心打磨 腾讯课堂、企鹅辅导 及 ABCMouse 三大产品。
社区官网:
http://imweb.io/
加入我们:
https://hr.tencent.com/position_detail.php?id=45616
扫码关注 IMWeb前端社区 公众号,获取最新前端好文
微博、掘金、Github、知乎可搜索 IMWeb 或 IMWeb团队 关注我们。
👇点击阅读原文获取更多参考资料