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