0

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

Javascript Vimeo 图库基础知识

    <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 上的标题，所有我需要知道的是如何在主 vplayer_title div 中动态改变标题

4

1 回答 1

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>');
    });
});
于 2014-03-23T19:58:55.093 回答