これを段階的に見ていきましょう。明らかに、いくつかのビデオを含むフォルダーがあり、それらのビデオへのパスを保存したデータベース (おそらく mysql) もあります。
ページの最初に、php などのサーバー側言語を使用して最初の 4 つのビデオをロードし、ページがロードされた後に ajax で 1 つ以上のリクエストが行われないようにします。
次に、jqueryを使用しているため、次のコードを使用できます
/*JS */
var totalVideos = 4;
function getImages(){
var request = $.ajax({
url: "getVideos.php",
type: "POST",
data: { last : totalVideos },
dataType: "json"
});
request.done(function( videos ) {
renderVideos(videos);
totalVideos += 4;
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
}
function renderVideos(vids){
var html = '';
for (var i = vids.length - 1; i >= 0; i--) {
var video = // Create the video html code here based on your needs.
html += video;
}
$('#yourVideoContainer').append(html);
}
$(document).ready(function(){
$('#moreVideos').click(function(){
getImages();
})
})
/* PHP */
if (isset($_POST['last']) && is_numeric($_POST['last'])) {
getVideos(intval($_POST['last']);
}
function getVideos(last) {
global $db; // This is your database conection object assuming it is global.
$query = 'SELECT * FROM videos LIMIT 4 OFFSET :last ORDER BY videos.id DESC';
if ($statement = $db->prepare($query)) {
$statement->bindParam(':last', last);
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
if(count($result) > 0){
header('Content-Type: application/json');
echo json_encode($result);
return;
}
}
header("HTTP/1.0 666 Someone stole your vids");
}
データベースとサーバーサイド言語を使用したくない場合は、すべてのビデオ情報が保存されるプロジェクトで単純な JS または JSON ファイルを使用できます。次に、javascript を介してファイルをロードし、ビデオ配列またはオブジェクトにアクセスします。
たとえば、json ファイルの場合、次のようにできます。
$.getJSON("videos.json", function(json) {
console.log(json); // this will show the info it in firebug console
});