Vimeo Gallery - отдельный заголовок div - для динамического изменения

0

Привет, я пытаюсь создать галерею видео на нашем веб-сайте, и я уже сделал 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

  • 0
    У меня нет хороших советов о том, как справиться с вашей основной тактикой JS, но вы можете легко получить заголовки видео с помощью конечной точки Vimeo OEmbed developer.vimeo.com/apis/oembed
  • 0
    Абсолютно кажется лучшим выбором для тех, кто лучше понимает API, я слишком новичок или, скорее, неспециалист, я просто не могу следовать документации
Показать ещё 2 комментария
Теги:
vimeo
vimeo-api

1 ответ

1

Возможно, вы захотите использовать плеер 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>');
    });
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню