官网改版项目问题总结

最近官网改版的任务交给了我,开发使用的是jq操作dom,后台php渲染的方式,如今已经开发完成,现在把一些问题记录下来,已备忘。

1、Safari浏览器不能自动播放视频

这次官网首页是有一个内嵌视频,正常情况下给video标签加上autoplay属性就能加载完自动播放了,但是实际发现Safari不会,查询了解到新版Safari禁用了自动播放,解决办法就是手动写行代码video.play();就解决了。

2、移动端浏览器对video标签兼容不好

在查看移动端效果的时候,发现多个浏览器对video标签做了自动置顶,也就是跳出正常布局,显示在页面最顶层,而且就算不置顶,当点击播放以后也会跳出布局,后来我在网上查了很多资料,也想了很多办法,由于我用的原生的video标签,所以考虑使用video.js等几个有名的第三方库试试,结果并不令人满意,这些库在pc端很完美,但是移动端并不理想,而我苦苦寻找没有发现有效的解决办法,最后和UI商量用gif代替了mp4。

3、首页视频加载慢的优化方案

在pc端,由于视频有4M,加载完成之前,视频区域会产生空白,移动端gif也很大,也有同样问题,于是选择在页面开始加载占位图,等待MP4加载完成或GIF加载完成后再展示。

这里有个细节,由于页面是后台渲染,所以用户在页面间跳转的时候实际是刷新了页面,这时候为了利用缓存,我们要区分用户首次加载页面和刷新页面这两种操作。

针对video,

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

我这里选择了canplay事件,当canplay调用时,表示视频已经加载完成准备好播放了,此时我隐藏占位图,展示video标签并播放。

用户刷新或跳回首页时,我希望利用的是之前的缓存视频,怎么确定视频已经缓存了呢,我尝试了多个video状态,没有找到,于是我觉得用sessionStorage 自己存一个状态(不过后来我发现没有意义)

而针对image,

https://www.runoob.com/jsref/dom-obj-image.html 我需要用到onload事件和complete状态

onload表示首次加载完成,当用户刷新浏览器启用图片缓存时,image的onload事件不会再走,这时候我们可以根据image的complete来作为执行操作的节点。

具体代码如下

 var gif = document.getElementsByClassName('logo-mobile')[0]
        var myVid = document.getElementById('video');
        if (IsPC()) {
            if (window.sessionStorage.getItem('v-ok') == 1) {
                console.log('视频已缓存')
                logo1.hide()
                logo2.show()
                myVid.play()
            } else {
            myVid.oncanplay = function () {
                console.log('首次进入PC')
                window.sessionStorage.setItem('v-ok', 1)
                logo2.show()
                myVid.play()
                logo1.hide()
            }
            }
        } else {
            gif.onload = function () {
                console.log('首次进入移动端')
                logo1.hide()
                logo3.show()
            }
            if (gif.complete) {
                console.log('gif已缓存')
                logo1.hide()
                logo3.show()
            } else {
                logo3.hide()
                logo1.show()
            }
        }

其中这里window.sessionStorage.getItem('v-ok') == 1这个判断如果不需要在这里做一些操作可以不要。因为刷新也会发走video的canplay事件。

 4、多语言适配

这里才用的方案是i18next.js ,链接https://www.i18next.com/,中文文档不全,有一些小坑,不过总体还是蛮好用的。

5、左侧菜单随着右侧内容高度变化跟着变化

这个主要是适配问题,还蛮麻烦的,类似于这种https://www.tencent.com/zh-cn/system.html,当小屏电脑比如macbook air 会出现遮挡问题,这里也是参考了腾讯的处理方式,学习到了。

 暂时能拿出来说的就这些,仅作记录。

posted @ 2019-07-10 15:03 卢沟晓月 阅读(...) 评论(...) 编辑 收藏