0

まず、私が達成しようとしていることの概要を簡単に説明します。

mySQLデータベースから画像、テキスト、およびビデオ（JWPlayerを使用して再生）をロードし、レイアウトにMasonryを使用するメインのPHPページがあります。次のコードを使用して追加のコンテンツをロードするInfinite-Scrollも使用しています。

$container.masonry( 'appended', $newElems, true );

追加コンテンツは、loadMore.phpというPHPページを介してロードされます

<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>

上記のlodeMore.phpページ内で、データベースからさらに多くのテキスト、画像、およびビデオをロードしています。データベースからロードされたアイテムがビデオである場合、「 videoPlayer.php 」と呼ばれるphpインクルードファイルを使用してそれを表示しようとします。このPHPインクルードファイルのコードは次のとおりです。

<?PHP
echo"<div id='$i'>Loading the video player ...</div>
<script type='text/javascript'>
jwplayer('$i').setup({
    flashplayer: 'player.swf',
    image: '$imagePath',
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: '$videoPath'
});
</script>";
?>

上記のファイルは、メインページが最初に読み込まれるときに表示されるビデオコンテンツに対しては正常に機能しますが、 appendおよびloadMore.phpページを介して読み込まれる場合、ビデオプレーヤーの上記のJavaScriptは表示されません。

タグを使用すると、追加が停止または終了する<script> </script> ため、タグを含むコンテンツを追加するために追加を使用できないように見えることがわかりました。</script>代わりにスクリプトタグを閉じるなど、ここで遭遇したさまざまな解決策を試しました<\/script>が、これでも機能しないようです。

誰かが洞察や、<script></script>ビデオプレーヤーのタグを機能させるために追加を使用できる可能性のある方法を提供できれば、それは素晴らしいことです！

  • こんにちはjwatts、それでここにあなたが私が宣伝することを勧めたコードを含む私のコードがあります：

    $(function(){
var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 295,
    isAnimated: !Modernizr.csstransitions,
    isFitWidth: true
  });
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {

    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true );

      alert("test");

      //Find Image and Video Paths from Div tags
      $($newElems).find("div.content-container").each( function() {
        var imgpath = $(this).find("div.content-imgpath").text();
        var vidpath = $(this).find("div.content-vidpath").text();
        var id = $(this).find("div.content-id").attr("id");
        loadPlayer( id, imgPath, vidPath );
        });

      alert("test 2");

      //Hide Paths
      /*
      div.content-imgpath, div.content-vidpath {
        display: none;
        }
    */


    });
  }
);

    }）;

組積造に電話した後、お勧めのコードを追加しましたが、テストの最初のアラートが機能するので問題があるようですが、2番目のテスト2は機能していないようです。また、何らかの理由でloadMore.phpを介した追加のコンテンツの読み込みを妨げているように見えるため、画像と動画のパスを非表示にするコードを推奨しました。

私が見逃したアイデアはありますか？メインページの上部にも、JWVideoプレーヤー用のloadPlayerjavascript関数を追加しました。

4

1 に答える 1

0

おそらく、jwplayer をロードするメイン ページに関数を作成します。

function loadPlayer(id, imgPath, vidPath) {
  jwplayer(id).setup({
    flashplayer: 'player.swf',
    image: imgPath,
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: vidPath
  });
}

次のような HTML を返します。

<div class="content-container">
   <div class="content-imgpath">path name here</div>
   <div class="content-vidpath">vid path here</div>
   <div class="content-id" id='$i'>Loading the video player ...</div>
</div>

画像パスとビデオ パスが非表示になっていることを確認します。

div.content-imgpath, div.content-vidpath {
   display: none;
}

呼び出した後、次のことをmasonry行います。

$($newElems).find("div.content-container").each( function() {
   var imgpath = $(this).find("div.content-imgpath").text();
   var vidpath = $(this).find("div.content-vidpath").text();
   var id = $(this).find("div.content-id").attr("id");
   loadPlayer( id, imgpath, vidpath );
});

更新: 上記の変数名を修正しました...

于 2012-05-16T22:30:27.307 に答える