0

左側にサムネイルのリストがあり、右側にプレーヤー領域があるビデオ ギャラリーが必要なクライアントがいます。ここまでは順調ですね。サムネイルをクリックすると、右側のペインで単一のビデオを再生する html5、jQuery、および CSS がいくつかあります。

私の問題は、クライアントが本質的に2つのプレイリストを望んでいることです。たとえば、手術を受けた個人のギャラリーでは、左側に患者の写真がサムネイルとして表示されます。サムネイルをクリックすると、その患者の経験に関するビデオが右側で再生されます。次に、そのビデオの下に、手術後 1 週間、手術後 2 週間などの他のリンクがあります。個人の日記のようなものです。

私が何を求めているかを確認するには、http://www.smartlaserlift.com/video-diaries.htmlで私がまとめた動作中のものをご覧ください。これは、いくつかの ajax を使用した完全なハックジョブであり、実際にはクロスプラットフォームで動作していません。

これは、サムネイルを表示して左側にビデオを再生するためだけに現在取り組んでいるマークアップです。2 番目のプレイリストの処理に関する提案、またはこれを廃棄するためのアイデアと、より良い方法を探しています。

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&amp;skinFile=video_skin.swf&amp;videoFileWidth='+videoWidth+'&amp;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&amp;skinFile=video_skin.swf&amp;videoFileWidth='+videoWidth+'&amp;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
4

1 に答える 1

0

リンクが機能するかどうかはわかりませんが、左側に5つのサムネイルを表示し、各サムネイルをクリックすると、使用したものと同様に、異なるビデオを再生できるようにするコードが必要です。私はそうではありません。コーディングの専門家であり、これを自分で理解することはできません。

于 2012-07-24T20:22:48.160 に答える