vimeo 视频结束时关闭 div

问题描述

我需要一个网站来制作介绍视频（网站/背景内容上的全宽 div）。所以我制作了一个带有 iframe 视频 (VIMEO) 的 Div 和一个跳过介绍的按钮（它通过 js 单击关闭 div）。

但我仍然需要它在视频结束后自动关闭 div。 vimeo视频结束时有没有办法触发这个事件？

我在 youtube 上找到了一种方法（使用 api），但不幸的是我需要它在 vimeo 中，因为它可能隐藏控件、徽标和所有内容。

非常感谢您的关注。

**-- 更新（它有效！）--感谢您的帮助！ 如果有人需要类似的解决方案，这里是代码：**

<div id="videointro">

<iframe src="https://player.vimeo.com/video/xxxxxxxxx?title=0&byline=0&portrait=0&transparent=0&autoplay=1&sidedock=0&controls=0" frameborder="0" title="Funny Cat Videos For Kids" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

</div>

<button id="btn"></button>


<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="video.js"></script> 


-- JS --

btn.onclick = function () {
    document.getElementById("videointro").style.display='none';
};

// vimeo 

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play',function() {
  console.log('Played the video');
});

player.getVideoTitle().then(function(title) {
  console.log('title:',title);
});

player.on('ended',function() {
    console.log('the end');
    player.destroy();
});

解决方法

如果有人需要类似的解决方案，代码如下：

<div id="videointro">

<iframe src="https://player.vimeo.com/video/xxxxxxxxx?title=0&byline=0&portrait=0&transparent=0&autoplay=1&sidedock=0&controls=0" frameborder="0" title="Funny Cat Videos For Kids" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

</div>

<button id="btn"></button>


<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="video.js"></script> 


-- JS --

btn.onclick = function () {
    document.getElementById("videointro").style.display='none';
};

// vimeo 

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play',function() {
  console.log('Played the video');
});

player.getVideoTitle().then(function(title) {
  console.log('title:',title);
});

player.on('ended',function() {
    console.log('the end');
    player.destroy();
});