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
请按照以下步骤在移动环境中消除重复的播放按钮:
-
修改查看器预设配置以禁用自定义叠加播放按钮,从而仅显示浏览器的本机播放按钮。
- 转到AEM中的Assets
>查看器预设。 - 编辑相关的查看器预设。
- 禁用与移动设备的自定义叠加控件相关的任何选项。
- 转到AEM中的Assets
-
检查视频播放器初始化脚本是否多次运行,这可能会创建重复的DOM元素。
- 使用浏览器开发人员工具监视对
s7viewers.VideoViewer或类似函数的调用。 - 添加诊断日志记录以跟踪触发这些脚本的时间和频率
- 使用浏览器开发人员工具监视对
-
确保与查看器预设绑定的CSS和JavaScript文件在各个环境中保持一致。
- 使用浏览器网络工具比较已加载的资源。
- 验证没有额外的脚本或样式可修改
.s7iconeffect或相关的类。
-
如果问题仅影响特定用户,请清除浏览器缓存或在无痕模式/私有模式下测试。
-
重新发布受影响的视频资产和更新的查看器预设以替换缓存版本。
-
注意:这是可选步骤。
您可以为移动设备应用条件CSS规则以禁止自定义叠加。 使用:
code language-none @media (max-width: 767px) { .s7playbutton { display: none !important; } } -
在部署到生产环境之前,在较低的环境中验证所做的更改。
- 在物理设备上测试,而不是在模拟器/模拟器上测试。
- 多次刷新页面以确认一致的行为。
3d58f420-19b5-47a0-a122-5c9dab55ec7f