Закрыть div, когда видео Vimeo закончится

Мне нужен веб-сайт, чтобы иметь вступительное видео (полный div по ширине сайта/фонового контента). Поэтому я сделал Div с видео iframe (VIMEO) и кнопкой для пропуска вступления (она закрывает div кликом js).

Но мне все еще нужно, чтобы он автоматически закрывал 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();
});

person Jay    schedule 26.05.2021    source источник
comment
Прочтите предоставленные документы, они помогут вам в дальнейшем: noreferrer">developer.vimeo.com/player/sdk/. Гугл это волшебная вещь.   -  person prettyInPink    schedule 26.05.2021
comment
Большое спасибо за ваш ответ, но дело в том, что я новичок в JS. Я все еще борюсь с вещами, которые кажутся простыми, но я попробую! Я гуглил некоторые решения, а также искал здесь в стеке, но большинство из них не работают!   -  person Jay    schedule 26.05.2021
comment
Хорошо, опубликуйте свой код и то, что вы пробовали, с этого момента люди будут помогать вам, когда вы застряли.   -  person prettyInPink    schedule 26.05.2021
comment
Опубликуйте свой код для Skip Intro, возможно, вы сможете повторно использовать ту же функциональность в player.getEnded().then(function(ended) { // 'ended' indicates whether the video has ended });   -  person disinfor    schedule 26.05.2021
comment
Привет, @disinfor, я обновил свой пост кодом. Но мое пропущенное интро не работает :(   -  person Jay    schedule 26.05.2021
comment
@prettyInPink, я только что обновил свой вопрос своим кодом. Но это не работает.   -  person Jay    schedule 26.05.2021
comment
@Jay, вероятно, это не работает, потому что вы делаете это: btn.onclick = function ()...., но нигде вы не определяете, что такое переменная btn.   -  person disinfor    schedule 26.05.2021
comment
Эй, спасибо еще раз за ваш ответ и доброту. Является ли кнопка идентификатором или ‹кнопкой›? Скроет ли это элемент div с id=videointro: HTML ‹button›skip intro‹/button› JS btn.onclick = function () { document.getElementById(videointro).style.display='none'; };   -  person Jay    schedule 26.05.2021
comment
О, я понял! ‹button id=btn›пропустить кнопку‹/button› btn был идентификатором! теперь кнопка пропуска работает нормально! Но div с видео iframe vimeo по-прежнему не закрывается, когда видео заканчивается...   -  person Jay    schedule 26.05.2021
comment
Потому что идентификатор intro, а не videointro   -  person disinfor    schedule 26.05.2021
comment
Вы также можете просто использовать player.destroy() в функции getEnded вместо document.getElement.... Кроме того, каждый раз, когда вы повторно используете один и тот же document.getElementById, вы должны назначить его переменной.   -  person disinfor    schedule 26.05.2021
comment
Привет чувак. Большое спасибо. Я думаю, что это почти там. Журналы консоли показывают мне, что функция работает нормально, но проблема в том, что она выполняется в начале видео, а не в конце. Я обновлю свой вопрос с изображением журнала, чтобы вы могли его увидеть. Большое спасибо за ваше внимание и доброту.   -  person Jay    schedule 26.05.2021
comment
i.stack.imgur.com/OIVuE.png на этом рисунке показан журнал.   -  person Jay    schedule 26.05.2021
comment
Это сработало, чувак, с этим player.on('ended', function() { вместо player.getEnded().then(function(ended) { !   -  person Jay    schedule 26.05.2021
comment
Вы должны скопировать рабочий код в ответ и вернуть вопрос обратно в нерабочий код. Это предотвратит закрытие этого, и вы действительно будете помогать другим в будущем :)   -  person disinfor    schedule 26.05.2021


Ответы (1)


Если кому-то нужно подобное решение, вот код:


<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();
});

person Jay    schedule 26.05.2021