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自定义暂停播放按钮,从给定时间开始