iOS 17+版本下隐藏Shopify商品视频控件的方法求助

我在Shopify商品图库区域添加了视频，安卓和Windows设备上已成功隐藏视频控件，但iPhone上控件仍显示。已尝试以下方法但均无效：

• 移除main-product.liquid中所有视频相关的controls属性
• 在theme.liquid添加脚本：

<script >
      var video = document.querySelector('#MainProduct-template--21546534895895__main');
      video.removeAttribute('controls');
  </script>

• 在base.css添加CSS：

video::-webkit-media-controls {
  display: none !important;
  opacity: 0; 
}
video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

• 为视频添加ID并在theme.liquid添加脚本：

{% if media.media_type == "video" %}
{{ media | media_tag: image_size: "720x", autoplay: true, loop: loop, preload: "none", id: myvideo, autoplay: true, height: "100%", width: "100%" }}
{% endif %}

<script>
  document.getElementById('myVideo').addEventListener('play', function() {
    this.controls = false;
  });
</script>

针对iOS设备的有效解决步骤 #

1. 满足iOS自动播放规则

iOS Safari要求视频静音才能自动播放，且静音自动播放的视频默认不会唤起控件。在media_tag中添加muted: true参数，同时明确设置controls: false：

{% if media.media_type == 'video' %}
  {{ media | media_tag: 
    image_size: '720x', 
    autoplay: true, 
    loop: true, 
    muted: true, 
    controls: false, 
    preload: 'none', 
    id: 'myvideo', 
    height: '100%', 
    width: '100%' 
  }}
{% endif %}

2. 增强CSS覆盖iOS控件元素

iOS使用webkit内核，需覆盖更多特定伪元素来彻底隐藏控件，在base.css中添加：

/* 彻底隐藏iOS视频所有控件 */
video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
video::-webkit-media-controls-timeline {
  display: none !important;
}
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

3. 确保脚本在视频加载后执行

将脚本改为DOM加载完成后运行，避免找不到视频元素，同时修正ID大小写问题（之前代码中ID为小写myvideo）：

document.addEventListener('DOMContentLoaded', function() {
  const video = document.getElementById('myvideo');
  if (video) {
    video.controls = false;
    // 监听播放事件，确保播放过程中控件不出现
    video.addEventListener('playing', function() {
      this.controls = false;
    });
  }
});

4. 检查主题强制添加的控件属性

部分Shopify主题会自动给视频添加controls属性，需找到主题中渲染视频的模板文件（如media.liquid或main-product.liquid），确保没有强制添加controls的逻辑。

内容的提问来源于stack exchange，提问作者Sahil Sharma