javascript - Vimeo ギャラリー - 個別のタイトル div - 動的に変更する

Question

こんにちは、私は私たちのウェブサイトでビデオのギャラリーを構築しようとしています。次のトピックの助けを借りて、すでに 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 ビデオ タイトルを使用してこの問題を解決するのが複雑すぎる場合、2 番目の代替手段は、リスペクト バケット div にタイトルを手動で入力することです。知る必要があるのは、メインの vplayer_title div でタイトルを動的に変更する方法です