jQuery視頻播放器列表,可以方便地為網站提供多個視頻項目,并讓用戶瀏覽和觀看。以下是一個簡單的代碼示例:
$(document).ready(function() { var playlist = [{ title:"視頻1", mp4:"http://myvideo.com/video1.mp4", poster: "http://myvideo.com/poster1.jpg" },{ title:"視頻2", mp4:"http://myvideo.com/video2.mp4", poster: "http://myvideo.com/poster2.jpg" },{ title:"視頻3", mp4:"http://myvideo.com/video3.mp4", poster: "http://myvideo.com/poster3.jpg" }]; var currentVideo = 0; var player = videojs("my-video"); $("#video-list li").on("click", function(){ var index = $(this).index(); currentVideo = index; var video = playlist[index]; player.src(video.mp4); player.poster(video.poster); $("#video-title").text(video.title); player.load(); player.play(); }); });
在這個示例中,我們首先定義了一個包含所有視頻的播放列表,每個視頻可以有一個標題、一個MP4鏈接和一個海報(圖像)。然后,我們定義了當前視頻的索引,以及一個使用video.js庫的視頻播放器。當用戶點擊播放列表中的任何視頻時,我們會獲取該視頻的索引,并更新播放器,以便加載和播放此視頻。我們還將視頻的標題設置為頁面中的標題區域。