1

10 個の動画を含むナビゲーション (メニュー) バーがあり、各動画とその脚注を 1 回のクリックで表示したい。ワンクリックで各ビデオが表示されますが、異なる脚注を処理する方法がわかりません。

ここに私のhtmlがあります:

    <div id="menu">
    <uL>
    <li>Choose a Country:</li>
    <li><a href="javascript:changeSource1();">US</a></li> 
    <li><a href="javascript:changeSource2();">Canada</a></li> 
    </ul>
    </div>

    <div id="content">
    <div class="video-player">
    <video id="videos" controls>
    <source id="mp4" src="Video/(name of the video).mp4" type="video/mp4" />
    <source id="ogv" src="Video/(name of the video).ogv" type="video/ogg" />
    </video>

     </div> 

    <div id="video-text">
    <p id="popcorn-text">Ipsum Lorem...Aenean consectetur ornare pharetra. Praesent et urna eu justo convallis sollicitudin. Nulla porttitor mi euismod neque vulputate sodales. </p>
     </div>

     </div>

そして、これがビデオでのみ機能する私のPOPCORNJSコードです:

    <script>
    function changeSource1()
    { 
    document.getElementById("mp4").src=  "Video/(name of the video).mp4";
    document.getElementById("ogv").src=  "Video/(name of the video).ogv";
    document.getElementById("videos").load();
    } 
    </script>

popcornjs コードで多機能を実現するにはどうすればよいですか (ビデオごとに異なる脚注を表示するなど)。ありがとう、N

4

1 に答える 1

0

Popcorn インスタンスはいくつでも持つことができるので、ここではビデオごとに 1 つ持つのが理にかなっています。また、Popcorn の各インスタンスには独自の脚注セットがあります。配列から始めて、各ビデオを動的に設定します。

var data = [
    {
        src: {
            mp4: 'video1.mp4', webm: 'video1.webm', ogg: 'video1.ogv'
        },
        footnotes: [
            {
                start: 2,
                end: 4,
                text: 'Ipsum Lorem...'
            }
            // etc.
        ]
    }
    // etc.
];

次に、ポップコーン インスタンスをセットアップし、データをロードして、切り替え用のクリック イベント ハンドラーを追加します。

var activeVideo = data[0];

//Popcorn provides this handy 'forEach' helper
Popcorn.forEach(data, function(vid, i) {
    var button;
    vid.video = document.createElement('video');
    Popcorn.forEach(vid.src, function(src, type) {
        var source = document.createElement('source');
        source.setAttribute('src', src);
        source.setAttribute('type', 'video/' + type);
        vid.video.appendChild(source);
    });
    vid.video.preload = true; //optional
    document.getElementById('').appendChild(vid.video);
    if (i) {
        vid.video.style.display = 'none';
    }

    vid.popcorn = Popcorn(vid.video);

    //every footnote needs a target
    vid.popcorn.defaults('inception', {
        target: 'video-text'
    });

    Popcorn.forEach(vid.footnotes, function(footnote) {
        vid.popcorn.footnote(footnote);
    });

    button = document.getElementById('button' + i); // or create one here
    button.addEventListener('click', function() {
        //pause and hide the old one
        activeVideo.popcorn.pause();
        activeVideo.style.display = 'none';

        activeVideo = data[i];
        activeVideo.style.display = '';
        activeVideo.popcorn.play();
    });
});

それはちょうどそれを行う必要があります。

問題の 1 つは、これが iPad では機能しないことです。1 ページに複数のビデオを指定すると、Mobile Safari がおかしくなるからです。その場合は、ビデオ要素を 1 つだけ作成し、クリック ハンドラーで src 属性を設定して (mp4 のみ)、 を呼び出します.load()。同じビデオ タグに複数の Popcorn インスタンスを含めることはできますが、インスタンスを「非アクティブ化」する場合は、呼び出すだけ.disable('footnote')で、間違ったビデオに脚注が表示されないようにenableし、アクティブなビデオで実行できます。

于 2012-11-22T13:21:58.183 に答える