AEMaaCS:行動裝置在Dynamic Media影片中顯示兩個播放按鈕

在行動裝置上檢視Adobe Experience Manager (AEM) as a Cloud Service中的Dynamic Media影片時,會顯示兩個重疊的播放按鈕。 若要修正此問題,請更新 檢視器預設集 設定、檢查初始化指令碼,並確保環境間的一致性。

說明 description

環境

  • 產品: Adobe Experience Manager (AEM) as a Cloud Service — 網站
  • 功能: Dynamic Media檢視器預設集
  • 執行個體:生產
  • 平台:在實體行動裝置(例如iPhone)上觀察

問題/症狀

  • 在行動裝置上檢視Dynamic Media影片時,會顯示兩個重疊的播放按鈕。
  • 桌上型瀏覽器、模擬行動環境或中繼環境中不會發生此問題。
  • 重複的播放按鈕在DOM中以不同的top屬性值呈現。

解決方法 resolution

請依照下列步驟,在行動環境中消除重複的播放按鈕:

  1. 修改檢視器預設集設定以停用自訂覆蓋播放按鈕,以便只顯示瀏覽器的原生播放按鈕。

    1. 移至AEM中的Assets > 檢視器預設集
    2. 編輯相關的檢視器預設集。
    3. 停用與行動裝置的自訂覆蓋控制項相關的任何選項。
  2. 檢查視訊播放器初始化指令碼是否執行多次,這會建立重複的DOM元素。

    1. 使用瀏覽器開發人員工具來監視對s7viewers.VideoViewer或類似函式的呼叫。
    2. 新增診斷記錄以追蹤這些指令碼觸發的時間和頻率
  3. 請確認和檢視器預設集繫結的CSS和JavaScript檔案在各個環境中一致。

    1. 使用瀏覽器網路工具比較已載入的資產。
    2. 請確認沒有額外的指令碼或樣式可修改.s7iconeffect或相關的類別。
  4. 如果問題僅影響特定使用者,請清除瀏覽器快取或在無痕模式/私人模式下測試。

  5. 重新發佈受影響的視訊資產和更新的檢視器預設集,以取代快取版本。

  6. 附註此為選擇性步驟。

    您可以對行動裝置套用條件CSS規則,以隱藏自訂覆蓋圖。 使用:

    code language-none
    @media (max-width: 767px) {
                    .s7playbutton {
                        display: none !important;
                    }
                }
    
  7. 在部署到生產環境之前,請先驗證較低層環境中的變更。

    1. 在實體裝置(而非模擬器/模擬器)上測試。
    2. 多次重新整理頁面以確認一致的行為。

相關閱讀

AEMaaCS使用手冊中的Dynamic Media 影片

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f