0
我有一個客戶端需要一個視頻庫，其左側有一個縮略圖列表，右側有一個播放器區域。到現在爲止還挺好。我有一些html5，jQuery和CSS，當點擊縮略圖時，在右窗格中播放單個視頻。HTML5視頻庫播放列表與多個視頻
我的問題是，我的客戶想要什麼在本質上是兩個播放列表。例如，擁有程序的個人畫廊會在左側將患者的照片作爲縮略圖，當點擊縮略圖時，會在右側開始播放有關患者體驗的視頻。然後在那段視頻下面會有其他的鏈接，比如手術後1周，術後2周等。個人日記排序。
要看我要求什麼，你可以看到一個我在http://www.smartlaserlift.com/video-diaries.html放在一起的工作。這是一個使用ajax的完全hackjob，實際上並不按照我想要的方式工作。
這是我目前正在處理的一些標記，只是爲了顯示縮略圖並在左側播放視頻。我正在尋找關於處理第二個播放列表的建議，或者關於處理第二個播放列表的建議，或者是關於廢除這個的一個想法，或許是一個更好的方法。
的HTML
<div class="video_gallery_container">
<div id="thumbs">
<a class="videoLink" videowidth="680" videoheight="383" videofile="Peggy_Web1" videothumb="peggy-vid-thumb" videocaption="Meet Peggy" videodescription="Meet Peggy as she begins her SmartLaser Lift Journey." ></a>
</div>
<div id="vidContainer">
<div id="videoPlayer">
</div>
</div>
中的JavaScript
$(document).ready(function() {
$('a.videoLink').each(function() {
var thumbnailFilePath = 'video/' + $(this).attr('videothumb') + '.jpg';
var videoCaption = $(this).attr('videocaption');
$(this).css('background-image','url('+thumbnailFilePath+')');
$(this).html('<div class="caption">' + videoCaption + '</div><img class="play" src="images/play_icon.png" />');
});
$('.videoLink').click(function(){
var videoFile = $(this).attr('videofile');
var videoPoster = $(this).attr('videofile');
var videoCaption = $(this).attr('videocaption');
var videoWidth = Number($(this).attr('videowidth'));
var videoHeight = Number($(this).attr('videoheight'));
var videoDescription = $(this).attr('videoDescription');
var videoCode = '<video width="'+videoWidth+'" height="'+videoHeight+'" controls autoplay autobuffer><source src="video/'+videoFile+'.ogv" type="video/ogg" /><source src="video/'+videoFile+'.mp4" type="video/mp4" /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+videoWidth+'" height="'+(videoHeight+40)+'" id="video_player" align="middle"><param name="allowScriptAccess" value="sameDomain"><param name="allowFullScreen" value="true"><param name="movie" value="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="scale" value="noscale"><param name="salign" value="lt"><embed src="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'" quality="high" width="'+videoWidth+'" height="'+(videoHeight+40)+'" name="video_player" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" scale="noscale" salign="lt" wmode="transparent" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></video>';
var playerBlock = '<div id="playerBlock"><div id="playerHeader">' + videoCaption + '</div>' + '<div id="player">' + videoCode + '</div><div id="videoDescription">' + videoDescription +'</div></div>';
$('#videoPlayer').html(playerBlock);
$('#videoPlayer').css('display', 'block');
});
});//end document.ready function