官網改版項目問題總結

時間 2019-12-15

標籤改版項目問題總結简体版

原文原文鏈接

最近官網改版的任務交給了我，開發使用的是jq操做dom，後臺php渲染的方式，現在已經開發完成，如今把一些問題記錄下來，已備忘。php

一、Safari瀏覽器不能自動播放視頻html

此次官網首頁是有一個內嵌視頻，正常狀況下給video標籤加上autoplay屬性就能加載完自動播放了，可是實際發現Safari不會，查詢瞭解到新版Safari禁用了自動播放，解決辦法就是手動寫行代碼video.play();就解決了。瀏覽器

二、移動端瀏覽器對video標籤兼容很差緩存

在查看移動端效果的時候，發現多個瀏覽器對video標籤作了自動置頂，也就是跳出正常佈局，顯示在頁面最頂層，並且就算不置頂，當點擊播放之後也會跳出佈局，後來我在網上查了不少資料，也想了不少辦法，因爲我用的原生的video標籤，因此考慮使用video.js等幾個有名的第三方庫試試，結果並不使人滿意，這些庫在pc端很完美，可是移動端並不理想，而我苦苦尋找沒有發現有效的解決辦法，最後和UI商量用gif代替了mp4。session

三、首頁視頻加載慢的優化方案dom

在pc端，因爲視頻有4M，加載完成以前，視頻區域會產生空白，移動端gif也很大，也有一樣問題，因而選擇在頁面開始加載佔位圖，等待MP4加載完成或GIF加載完成後再展現。ide

這裏有個細節，因爲頁面是後臺渲染，因此用戶在頁面間跳轉的時候實際是刷新了頁面，這時候爲了利用緩存，咱們要區分用戶首次加載頁面和刷新頁面這兩種操做。佈局

針對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()
            }
        }