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