如何实现AMP页面中amp-video仅单次autoplay，而非滚动触发重复播放

该需求存在完全可落地的实现方案，无需引入额外第三方脚本，依托AMP原生组件能力即可完成配置。

默认autoplay逻辑的问题 #

• 直接为amp-video添加静态autoplay属性时，组件的默认触发逻辑为：只要视频重新进入可播放视口范围，就会自动触发播放，用户滚动离开后再返回视频位置时，会重复触发自动播放，无法满足“仅自动播放一次”的要求。

具体实现步骤 #

• 首先在页面引入必需的AMP组件：除基础的amp-video组件外，需引入amp-bind组件，用于全局状态管理和动态属性绑定。
• 配置全局状态标记：插入amp-state节点，存储视频是否完成过自动播放的标识，初始值为未触发状态：

<amp-state id="videoPlayFlag">
  <script type="application/json">
    {
      "hasAutoPlayed": false
    }
  </script>
</amp-state>

• 调整amp-video的属性配置：移除组件上写死的静态autoplay属性，替换为动态绑定的autoplay开关，仅在视频未触发过自动播放时，为组件开启autoplay能力：

<amp-video
  [autoplay]="videoPlayFlag.hasAutoPlayed == false"
  width="500"
  height="300"
  layout="responsive"
  on="playing:AMP.setState({videoPlayFlag: {hasAutoPlayed: true}})"
>
  <source src="你的视频资源地址.mp4" type="video/mp4">
</amp-video>

运行逻辑说明 #

• 首次加载页面时，状态标记为false，用户第一次滚动到视频所在视口范围时，动态绑定的autoplay逻辑生效，触发视频自动播放。
• 视频一旦进入实际播放状态，会立刻触发playing事件，将状态标记更新为true。
• 后续无论用户如何滚动页面让视频离开再返回视口，因为autoplay属性已经被绑定为false，组件不会再自动触发播放，完全匹配仅单次自动播放的需求。

注意：该逻辑仅拦截自动播放的触发行为，用户主动点击播放、暂停的交互操作不受任何限制。

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