我正在使用infinite-scroll.js、video.js 和masonry.js。第一个页面正确加载(即,视频图像在“pintrest 样式”框中的视频播放器中加载。但是,当用户向下滚动时,只有 pintrest 样式的框加载空视频播放器(即,没有图像和视频不玩)。我想我应该以某种方式重新初始化 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" });
});
}
);