0

次の簡単なシナリオを機能させることができます。ページ上のdivをクリックすると、FancyBoxのオーバーレイウィンドウでJWPlayerを使用してビデオが開きます。簡略化されたコードは次のとおりです。

HTML：

<div>
    <a class="play_video" href="#" rel="/bin/video.mp4">Click to Watch Video</a>
</div>

jQuery：

$(document).ready(function() {
    $(".play_video").fancybox({
        content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
        afterShow: function()
            {
                var myVideo = $(".play_video").attr("rel");
                jwplayer("video_container").setup({
                    flashplayer: "/bin/player.swf",
                    file: myVideo,
                    width: 640,
                    height: 380,
                });
            }
    });
});

ここに私の問題があります：それぞれが異なるビデオを再生している2つのDIVを表示したい場合、どのように行を変更しますか

myVideo = $(".play_video").attr("rel")

動的であり、適切なdivのrel属性を選択します。たとえば、2番目のdivは次のようになります。

<div>
    <a class="play_video" href="#" rel="/bin/another_video.mp4">Click to Watch a different Video</a>
</div>

これが明確であることを願っています！ご協力ありがとうございました。

4

1 に答える 1

0

このメソッドの問題は.attr()、一致したセットの最初の要素のみの属性値を取得することです。各要素の値を個別に取得するには、メソッドを使用する必要がある場合があります.each()

リンクをループせずに実際に機能させるには、href属性内にビデオ参照を設定し（適切な機能方法）、次のようにコードを微調整します。

html

<a class="play_video" href="/bin/video.mp4">Click to Watch Video</a>
<a class="play_video" href="/bin/another_video.mp4">Click to Watch a different Video</a>

脚本

$(document).ready(function() {
 $(".play_video").on("click", function(){
   $.fancybox({
     content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
     afterShow: function(){
        var myVideo = this.href;
        jwplayer("video_container").setup({
          flashplayer: "/bin/player.swf",
          file: myVideo,
          width: 640,
          height: 380,
        }); // jwplayer setup
     } // afterShow
   }); // fancybox
   return false; // prevents default 
 }); // on
}); // ready

注：.on()jQuery1.7以降が必要です

于 2012-11-12T00:43:53.500 に答える