Question

您好我正在尝试在我们的网站上建立一个视频库，我已经使用以下主题的帮助完成了90％的视频

    <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已经可以让它变得更容易了。但我真的不太理解API，它对我来说太基本了，如果它太复杂，无法通过使用vimeo视频标题解决这个问题，第二个替代方案将是我手动输入尊重桶div的标题，所有我需要知道的是如何动态更改主vplayer_title div中的标题

Answer 1

您可能想要使用播放器的JS API：https://developer.vimeo.com/player/js-api

缩略图点击事件中的内容如下：

var player = $f(iframe);

player.addEvent('ready', function() {
    player.api('getVideoTitle', function(title) {
        // set the title contents here
        $('#vplayer_title').html('<p>' + title + '</p>');
    });
});

Vimeo Gallery - 单独的标题div - 动态变化

1 个答案: