Vimeo 嵌入:自定义播放按钮工作。如何添加暂停按钮?

Posted

技术标签:

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

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

<div class="myvimeo_container">

<iframe id="vimeovid1" src="https://player.vimeo.com/video/vimeoID"   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 视频...它们的响应式嵌入并不是那么棒...所以我正在尝试解决一些问题...

【问题讨论】:

【参考方案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"   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>

【讨论】:

以上是关于Vimeo 嵌入:自定义播放按钮工作。如何添加暂停按钮?的主要内容,如果未能解决你的问题,请参考以下文章

html Vimeo Video自定义暂停播放按钮,从给定时间开始

播放 vimeo 嵌入时向 div 添加一个类

单击时未播放 Vimeo 嵌入视频 [关闭]

使用自定义字段从 Youtube 或 Vimeo 嵌入背景视频

动态添加/控制 vimeo 嵌入

风格 vimeo 播放栏和播放按钮