官网改版项目问题总结

小灰灰 2023-08-17 16:32 122阅读 0赞

最近官网改版的任务交给了我，开发使用的是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 会出现遮挡问题，这里也是参考了腾讯的处理方式，学习到了。

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

转载于:https://www.cnblogs.com/wuyuchao/p/11163097.html