1

我正在使用 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插件

4

1 回答 1

0

我刚刚将全部花式框代码放在锚标记点击事件中。然后它就像一个魅力。喜欢..

$(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;
});
于 2012-09-08T13:03:41.437 回答