Vimeo自定义播放按钮已实现，如何添加暂停按钮？

嘿，刚接触编程就能自己折腾Vimeo的自定义按钮，已经很棒啦！你的播放按钮能正常工作，说明核心的postMessage通信逻辑是对的，暂停按钮没成功大概率是method参数写错了，我来帮你修正，顺便给你加个响应式小优化（毕竟你说官方响应式效果不好）。

完整的可运行代码 #

<div class="myvimeo_container">
  <!-- 替换成你的实际Vimeo视频ID -->
  <iframe id="vimeovid1" src="https://player.vimeo.com/video/你的VimeoID?api=1" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  <br>
  <button onclick="play_video()">播放视频</button>
  <button onclick="pause_video()">暂停视频</button>

  <script>
    function play_video() {
      const player = document.getElementById("vimeovid1");
      // Vimeo播放器API要求发送JSON格式指令，播放对应method为"play"
      const data = { method: "play" };
      // 把*换成Vimeo播放器域名，更安全
      player.contentWindow.postMessage(JSON.stringify(data), "https://player.vimeo.com");
    }

    function pause_video() {
      const player = document.getElementById("vimeovid1");
      // 暂停对应的method是"pause"，这就是你之前漏掉的核心关键点！
      const data = { method: "pause" };
      player.contentWindow.postMessage(JSON.stringify(data), "https://player.vimeo.com");
    }
  </script>
</div>

<style>
/* 响应式容器优化，适配各种屏幕宽度 */
.myvimeo_container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9标准视频宽高比 */
  height: 0;
  overflow: hidden;
}
.myvimeo_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
</style>

关键修正&优化说明 #

• 启用Vimeo API支持：我在iframe的src末尾加了?api=1，这是Vimeo允许外部脚本控制播放器的前提，没加这个的话postMessage指令会直接失效！
• 暂停的method参数：播放用"play"，暂停必须对应"pause"，这是你之前失败的核心原因。
• 安全通信优化：把原来的"*"换成"https://player.vimeo.com"，避免向所有网站发送消息，更符合安全规范。
• 响应式修复：通过CSS的padding-bottom技巧实现自适应视频容器，完美解决官方响应式效果不佳的问题。

WordPress嵌入提示 #

在WordPress编辑页面时，直接添加「自定义HTML」块，把这段代码粘贴进去，替换掉你的VimeoID为实际视频ID就能正常使用啦。

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