Привет, я пытаюсь создать галерею видео на нашем веб-сайте, и я уже сделал 90% этого, используя справку из следующей темы
Основы галереи Vimeo Javascript
<div class="vimeo-container">
<iframe id="vplayer"
src="http://player.vimeo.com/video/.." frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!--vimeo-container-->
<div id="vplayer_title">
<p>INSERT VIMEO VIDEO TITLE HERE FOR EACH VIDEO<p>
</div><!--vplayer_title-->
<div class="bucketthumbs">
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_1.jpg">
<div class="title_bucket" id="thumb1_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_2.jpg">
<div class="title_bucket" id="thumb2_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_3.jpg">
<div class="title_bucket" id="thumb3_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
</div><!--bucketthumbs-->
Это мой html. Использование вышеуказанной темы. Я успешно могу настроить эскизы для изменения видео в iframe.
<script>
$(function() {
// Add an event listener to the click event for each of your thumbnails
$('.video-thumbnail').click(function(e) {
// changes src of the iframe to the one we stored in the clicked thumbnail
$('#vplayer').get(0).src = this.getAttribute('video-uri');
// stops default browser behaviour of loading a new page
e.preventDefault();
});
});
</script>
Но я не хочу использовать название, которое vimeo имеет на видео. Вместо этого я хочу отобразить его ниже основного видео и изменить его с помощью видео, вытаскивая заголовки из vimeo.
Я только разработчик, и мои знания javascript и API чрезвычайно ограничены. Я попытался использовать тот же код, чтобы изменить названия, но поскольку это использует src и атрибут, я не думаю, что знаю, как заставить его работать.
Может ли кто-нибудь помочь?? :(
Я считаю, что Vimeo имеет oEmbed, что может сделать это проще. Но я не могу действительно понять большую часть API, это слишком просто для меня. Если это слишком сложно решить эту проблему, используя видеоигры vimeo, второй альтернативный вариант - это вручную ввести заголовки в div div, нужно знать, как динамически изменять заголовок в главном div vplayer_title
Возможно, вы захотите использовать плеер JS API: https://developer.vimeo.com/player/js-api
Что-то вроде этого в событии click thumbnail:
var player = $f(iframe);
player.addEvent('ready', function() {
player.api('getVideoTitle', function(title) {
// set the title contents here
$('#vplayer_title').html('<p>' + title + '</p>');
});
});