功能复杂度低估带来的问题分享

沈二到不行
515 阅读4分钟

主题

这次主要分享的是自己外接的一个小东西，因为对各个PC、微信、安卓、IOS、Mac等平台网页支持低估，造成的时间复杂度提升问题，过程回溯及总结。

起因

去年帮别人分析了一下公众号svg一些特效（下图）是怎么去实现的，大略最后实实在在的给出实现的思路及所用的工具推介，聊了聊各自近况还有所属领域，算是结了个善缘。
去年底的时候有个企业开屏宣传，相关的技术实现可行性及报价大概咨询了一下，我先做了技术摸底，gif大略在pc和手机先做了验证，告知可行，就开始做了，本来以为2-3天就完全搞定了,奈何断断续续折腾了比较久，过程以作分享。

image.png

经过

清晰度问题

mp4视频转换gif不够清晰，会有流畅性及清晰度不够的问题,于是这个思路换成了mp4,其后又有webp、webm格式的转换，会有三段内容，分别是循环开始->内容->循环结束于是按照webm以video为主进行了实现。

  • 属性支持情况 image.png
  • 事件情况

image.png

  • 应用
  1. 因为视频初期未经过压缩处理，而我的服务器带宽比较小，因此会增加一个资源加载的动画，待视频加载完成后连贯的播放，用到的事件是canplaythrough
  2. 另外因为手机侧和pc上用的不同宽高比资源,因此资源会动态赋值
  if (isPhone()) {
                     $('.end_video').attr('src', "img/mloading.webm");
                     $('.first_video').attr('src', "img/mloading.webm");
                     $('.ys_ban_video').attr('src', "img/mcontent.webm");
                    
                  } else {
                      $('.first_video').attr('src', "img/loading.webm");
                      $('.ys_ban_video').attr('src', "img/content.webm");
                      $('.end_video').attr('src', "img/end.webm");
                  }
                  $('.first_video').on('canplaythrough', function () {
                      $('.first_video').get(0).play();
                  });

兼容性问题

PC上经过资源压缩，把webm形式的资源从MB级压缩到了KB级，效果已经完全确认无争议，但是手机侧出现的问题比较多。

  • 安卓手机最后一段视频无法正常显示，主要体现在微信打开上,其他浏览器有些正常。
  • IOS基本属于黑屏，后来发现是canplaythrough事件不咋个支持。
  • mac情况与ios差不多属于同类情况。
  • 其他浏览器会出现默认定制的一些启动或者安全性阻断加载问题。

排查过程

  • 属性 主要对一些属性及事件支持情况进行了验证测试，另外吐槽一下微信开发者工具,一些特殊的如video的兼容性问题基本上没有做啥体现，调试不出来问题，得在真机上才有所反馈
  <video class="first_video " loop="loop" preload="auto"  autoplay 
               webkit-playsinline="true"  
               x-webkit-airplay="true"
               playsinline="true"
               x5-video-player-type="h5"
               x5-video-orientation="h5"
               x5-video-player-fullscreen="true"
               muted>
  • 事件 这个主要体现在IOS上，video 不支持canplaythrough事件，且没有同类型的替代事件，当前资源比较大的情况下，这个事件尤为重要，当然还有ios出于安全流量考量做出的禁止自动播放，有解决途径，但此项暂时被排除在主因之外
  • 视频格式 这块一些新格式webm及webp格式ios貌似支持的不是太好，视频用MP4格式做尝试，效果不理想，最主要的是事件不支持，于是集中在gif及webp格式上，webp格式在ios上异常卡顿，之前看了一篇资料是ios底层动画渲染webp支持性不是太好，于是又定位到gif上来 image.png
  • 帧率问题 因为转gif是我用工具转的，我默认以为我用的工具帧率是以视频默认帧率加载的，结果这个问题因为之前对视频相关内容知识面的缺失，忽略了转换帧率的问题，调整了正确的帧率后，ios加载的问题终于被解决，此处注意一个问题，gif播放结束需要用定时器根据视频长度来进行结束，与视频播放不同，这里的帧速率，竟然不是取的默认 image.png

总结

video标签用的深度有限，对于别人在多平台兼容性的考量有低估，本来很小的一个东西却延申出来很多知识面和问题点，解决途径也很散乱，我们要得出正确的结论需要系统性的去根据结果来判断抉择。
不过最后老板很理解波折过程，加了钱，但主因还是对整体的复杂性和平台兼容覆盖面的低估造成的问题，依次引以为戒，多身怀敬畏。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

avatar
文章
阅读
粉丝