如何使用jquery fancybox彈出彈出視頻

Question

我正在使用C＃編寫asp.net mvc。我正在嘗試實施視頻庫，其中視頻列表來自數據庫。現在，當我點擊任何視頻時，我想在彈出窗口中播放視頻。因爲我已經使用fancybox jquery插件喜歡，

$(document).ready(function(){ 
    $("a#videolink").click(function(){ 
     url=$(this).data('url'); 
     }); 

    $("a#videolink").fancybox({ 
      frameWidth: 480, 
      frameHeight: 295, 
      overlayShow: true, 
      overlayOpacity: 0.8, 
      'content': '<div><div class="video-js-box vim-css" id="divVideo">' + 
           '<video id="example_video_1" class="video-js" width="635" height="425" controls="controls" preload="auto" poster="' + url + '.png">' + 
'<source="/uploads/"'+url+'"/>' 
            '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + 
            '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 
            'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + 
            '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + 
            '<param name="allowfullscreen" value="true" />' + 
            '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + 
            '<!-- Image Fallback. Typically the same as the poster image. -->' + 
            '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + 
            ' title="No video playback capabilities." />' + 
            '</object>' + 
           '</video>' + 
           '</div></div>', 
        'onComplete': function() { 
         $("#fancybox-inner").css({ 'overflow': 'hidden' }); 
         VideoJS.setupAllWhenReady(); 
        }, 
        'onClosed': function() { $("#fancybox-inner").empty(); } 
       }); 
     return false; 
    }); 

但我無法播放視頻。請指導我正確使用fancybox插件

Answer 1

我剛剛將總fancybox代碼放置在定位標記點擊事件中。那麼它就像一個魅力。像..

$(document).ready(function(){ 
    $("a#videolink").click(function(){ 
     url=$(this).data('url'); 
$("a#videolink").fancybox({ 
      frameWidth: 480, 
      frameHeight: 295, 
      overlayShow: true, 
      overlayOpacity: 0.8, 
      'content': '<div><div class="video-js-box vim-css" id="divVideo">' + 
           '<video id="example_video_1" class="video-js" width="635" height="425" controls="controls" preload="auto" poster="' + url + '.png">' + 
'<source="/uploads/"'+url+'"/>' 
            '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + 
            '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 
            'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + 
            '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + 
            '<param name="allowfullscreen" value="true" />' + 
            '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + 
            '<!-- Image Fallback. Typically the same as the poster image. -->' + 
            '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + 
            ' title="No video playback capabilities." />' + 
            '</object>' + 
           '</video>' + 
           '</div></div>', 
        'onComplete': function() { 
         $("#fancybox-inner").css({ 'overflow': 'hidden' }); 
         VideoJS.setupAllWhenReady(); 
        }, 
        'onClosed': function() { $("#fancybox-inner").empty(); } 
       }); 
     return false; 
});