0

私はinfinite-scroll.js、video.js、およびmasonry.jsを使用しています。最初のページは正しく読み込まれます (つまり、ビデオの画像は「ピントレスト スタイル」のボックス内のビデオ プレーヤー内に読み込まれます。ただし、ユーザーが下にスクロールすると、ピントレスト スタイルのボックスのみが空のビデオ プレーヤーで読み込まれます (つまり、画像やビデオは表示されません)。どうにかして video.js を再初期化する必要があると思いますが、複数のビデオで適切に再初期化する方法がわかりません. 私の js コードは次のとおりです. 新しくロードされたボックスにビデオ プレーヤーをロードするにはどうすればよいですか? ?

  $container.infinitescroll({
debug: false,
//extraScrollPx: 40,
bufferPx: 40,
navSelector  : '#navigation',    // selector for the paged navigation 
nextSelector : '#navigation a',  // selector for the NEXT link (to page 2)
itemSelector : '.masonry_object',     // selector for all items you'll retrieve
loading: {
    finishedMsg: null,
    img: "img/loader.gif",
    msg: null,
    msgText: " ",
    speed: 'fast',
  }
},
// trigger Masonry as a callback
function( newElements ) {
  // hide new items while they are loading
  var $newElems = $( newElements ).css({display:"none"},{ opacity: 0 });
  // ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    // show elems now they're ready

    $container.masonry( 'appended', $newElems, true ); 
    $newElems.show().delay(1000).animate({ opacity: 1 },1000);
    $newElems.videojs("example_video_number", { "controls": true, "autoplay": false, "preload": "auto" });
  });
}

);

4

0 に答える 0