header_v0.7.2

视频H5制作过程中常见的四个坑及解决措施

224天前发布

原创文章 / 多领域 / 观点
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

感谢Epub360的邀请,让我分享最近比较热的视频H5制作心得,这半年做的项目确实以视频H5为主。在这里,结合案例和Epub360,我试着分享视频H5制作过程中常见的四

感谢Epub360的邀请,让我分享最近比较热的视频H5制作心得,这半年做的项目确实以视频H5为主。在这里,结合案例和Epub360,我试着分享视频H5制作过程中常见的四个坑及解决措施,期待这些小技能能够帮到各位。


7a2a584e43d9a801219c77169a2e.jpg

三人游创意坊Epub360主页


注:下面这些坑不只是Epub360的问题,很多是受手机系统和手机性能所致。


坑一:视频在安卓里需要点击才能播放


苹果IOS系统可以分流加载视频,并且不需要触发,设置自动播放的话,也就是一上来就可以看。安卓一般需要等一会,并且需要点击才能播放,所以这里有一点小技巧,可以借鉴一下。


7add584e4405a801219c7774e58f.jpg


视频内的第一帧,通过软件截取下来做成一张封面图,在封面图上加一个按钮,准备工作就完成了。然后在Epub360里面嵌入视频和封面图(封面图要在视频上一层),给封面图增加一个【渐隐】动画并且设置等待触发,同时设置点击时的触发器:①点击时【渐隐】、②点击时播放音视频,先后顺序不要弄错了。


新手派友们,可以把视频第一帧做成黑色,这样会比较直观,而且不容易出错。当然还有更多好的办法,大家可以多多尝试。另外,Epub360官方也提供了一个免费模板《穿越故宫来看你》,大家可以复制案例进一步学习了解下。


坑二:视频在安卓手机播放时有进度条


f620584e442ba801219c779ec624.jpg


视频属性栏里面有一个“尺寸与位置”,点开后“启动尺寸自适应”,把上下左右边界锁定打开,那么进度条就会“基本”消失了,如下图:


30b8584e445ea801219c77ef1516.jpg


关于上面两个坑,大家也许可以用到Epub360的系统参数组件(专业版及以上付费用户才能使用)来协助解决。系统参数组件可以用于进行操作系统判断,包括Android、IOS、Windows等;是否微信中打开的判断等,使得H5作品运行环境和细节控制方面,有更高的控制能力,


坑三:视频加载慢


用Epub360做了那么多视频H5项目,前段时间有过访问慢的问题,但是这两月问题好像莫名解决了,猜测是Epub360团队在背后默默耕耘。前面说过苹果是会分流加载的,安卓则是需要再加载一会,所以建议各位派友们不要把视频做得太长太大。


视频大小跟比特率,帧数率,压缩格式等有关,派友们最好在这块也研究下,顺便一提,视频的大小跟尺寸并没有太大关系,也就是说1136*740px、60s、24.9帧数率、1600比特率的视频大概在12m左右,而568*370px减半尺寸的大概是10m,所以尺寸并不重要。


Epub360的预加载并不能预加载视频,这个是微信浏览器的问题,跟Epub360无关。Epub360也反馈过他们会研究,如果有这个技术,相信一定会开发出来,大家拭目以待吧!


beb1584e4475a801219c77ea43be.jpg


那么怎么解决视频卡顿不播放的尴尬呢,所以还是建议新手们,把视频的第一帧做成黑底,然后再加一个隐藏的loading,点击按钮后播放音视频,同时播放loading。如果视频成功播放了,就让loading消失,如果视频没有成功播放,就loading会出现,这样可以让场面不那么尴尬。


坑四:视频结尾跳转到引流页会有小卡顿


视频结尾往往接的是结束引流页,如果结束得太仓促会让人觉得尴尬不顺畅。所以一般好的作品,例如案例《穿越故宫来看你》,结尾就是视频最后一帧,视频播放完毕自动跳转页面,那么页面之间就衔接起来了,这里当然会有一点点的小卡顿,这个是通病,大TGideas都解决不了的问题,咱们怎么能解决?不过,其实呢,是可以的...至于怎么解决,卖个关子,想知道的童鞋可以加我微信18898593841。


最后谈谈Epub360加入视频的方式:


Epub360基础版及以上版本就可以嵌入本地视频,嵌入方式很简单快捷。


15cc584e448ba8012060c8ab8647.jpg

Epub360官方尺寸1136*740为最佳全屏尺寸,Epub360有锁定边界的功能,会自适应所有机型。如果不想全屏,也可以做小于这个尺寸的,个人不建议给视频元素加属性,安卓机会有Bug。当然,如果想省流量的用户们,可以加入腾讯视频外链,这样会节省不少流量费。在这里得吐槽一下:Epub360流量是按照点击一下就扣除,不是按照实际加载了多少就扣除多少。


未来视频类H5会继续发展,也许会往交互视频H5发展,例如密室逃脱的《活口》那种,但是交互类的Bug很多,例如每段视频结束,安卓机会出现链接不上等小问题,体验会很差。本人也没有做过分段交互类视频H5,这里就不过多探讨了。


想要做好的视频类H5,需要软硬件的配合,AI、PS、AE、PR等,一个不能少,电脑也要10K+以上才会得心应手,如果各位还懂Flash,那还等什么,赶紧做几个玩玩,一定很爽的。另,在制作视频H5时,我经常把Epub360当Flash用,今后有机会也和大家分享分享相关技能。


今天的分享就到这了,小小的浅见,希望能受用,谢谢!



                               Epub360推荐设计机构“三人游创意坊”创始人&创意总监

                                                            唐仲龙

7

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功