Vimeo 嵌入：自定义播放按钮工作。如何添加暂停按钮？答案

【问题标题】：Vimeo Embed: Custom Play Button working. How to add a pause button?Vimeo 嵌入：自定义播放按钮工作。如何添加暂停按钮？
【发布时间】：2020-08-13 14:10:41
【问题描述】：

我设法使用此代码通过外部播放按钮播放 vimeo 视频

<div class="myvimeo_container">

<iframe id="vimeovid1" src="https://player.vimeo.com/video/vimeoID" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br>
<button onclick="play_video()">MY_PLAY_BUTTON</button>

<script>
function play_video() {
  var player = document.getElementById("vimeovid1");
  var data = { method: "play" };
  player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script></div>

这行得通！

但我无法添加第二个暂停视频的按钮。有没有办法实现第二个

<button onclick="pause_video()">MY_PAUSE_BUTTON</button>

<script>
function play_video() {
  var player = document.getElementById("vimeovid1");
  var data = { method: "pause" };
  player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>

我还想不通。我刚开始学习编码，如果有人能指出我正确的方向，那就太棒了。

顺便说一句，我在 wordpress 中使用上面的代码...嵌入 vimeo 视频...它们的响应式嵌入并不是那么棒...所以我正在尝试解决一些问题...

【问题讨论】：

标签： html wordpress iframe vimeo vimeo-api

【解决方案1】：

尝试将您的函数名称更改为pause_video，因为这是您的按钮试图调用的名称。

【讨论】：

【解决方案2】：

看起来这是一个简单的案例，你没有为暂停按钮正确命名你的物理功能。

<button onclick="pause_video()">MY_PAUSE_BUTTON</button>

<script>
function pause_video() { //EDIT: Needed to call the function 'pause_video' to link up to your button
  var player = document.getElementById("vimeovid1");
  var data = { method: "pause" };
  player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>

如果您希望使您的内容更具响应性，一个非常简单的方法是使用引导程序来做到这一点，请查看this tutorial。

你最终会得到这样的东西来为你处理流畅的视频：

<div class="embed-responsive embed-responsive-16by9">
  <iframe id="vimeovid1" class="embed-responsive-item" src="https://player.vimeo.com/video/vimeoID" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

如果您不想使用引导程序，那么我过去曾使用过embedresponsively.com 网站，它将您的嵌入打印在一个整洁的小包中，如下所示：

<style>
.embed-container { 
   position: relative; 
   padding-bottom: 56.25%; 
   height: 0; 
   overflow: hidden; 
   max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}
</style>

<div class='embed-container'>
   <iframe src='https://player.vimeo.com/video/vimeoID' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

【讨论】：