Question

我试图让Flowplayer显示在Fancybox中，但不能让它正常工作。到目前为止，这是我的代码;

            $("a.video_link").click(function () {

            $.fancybox({
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'title': this.title,
                'width': 680,
                'height': 495,
                'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
                'type': 'swf',
                'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });

            return false;
        });

有什么建议吗？

Answer 1

尝试手动启动fancybox并将其内容设置为流动播放器。例如，给定链接：

<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" 
    class="videoLink">Demo</a>

创建一个像这样的JQuery点击函数：

$('a.videoLink').click(function(e) {
    e.preventDefault();

    var container = $('<div/>');

    container.flowplayer(
        'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
        $(this).attr('href')
    );

    $.fancybox({
        content: container,
        width: 300, height: 200,
        scrolling: 'no',
        autoDimensions: false
    });
});

请注意，默认情况下，flowplayer占用了它的容器大小，因此必须给出有限的尺寸才能正确查看它。

Answer 2

您是否尝试使用jQuery在SWF对象上创建，然后设置swf参数，然后使用流播放器内容设置直接设置模型的html。??

同时尝试检查调试窗口，看看是否有任何错误显示。

- E.G

var flashvars = { //Change this with $.extend within click callback if you need to!
    file : 'yvideo.flv'
}
var flowBoxParams = {
     'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'width': 680,
    'height': 495,
}

var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();

swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);

$("a.video_link").click(function(){
      //Merge basic settings with title
      params = $.extend(flowBoxParams,{title:this.title,html:$container});

      //Send object to FlowPlay
      $.fancybox(params);

     //Show the video play
     $($container).show();
});

这只是基本上设置为其中包含默认设置的变量（flashvars，flowBoxParams），创建一个带有id（MediaPlayerHolder）的空div容器并将其设置为display：none。

然后我们使用swfObject创建一个基本的flash元素，这是你的flowplayer swf并将它分配给隐藏的div容器。

然后我们等待用户点击激活，然后我们更改默认设置以将标题值添加到流动播放器选项。

然后我们告诉流程播放器开始它需要做什么。

轻微改变容器的可见性。

这是未经测试的，但如果有任何错误，那么它们应该只是次要的，除非在加载swf本身时流程是严格的。

Answer 3

我做了很多，我能让它工作的唯一方法就是做这个，

JavaScript＆gt;＆gt;

flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");

$('.yourbox').fancybox();

Html＆gt;＆gt;

<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>

<div style="display:none">
   <div id="data">
       <a href="http://helix.imperial.ac.uk/bsflash/courses/finance_group/ethics/icm.mp4" style="display:block;width:640px;height:360px" class="player"></a>
   </div>
</div>

如果你这样做的话，你需要在关闭盒子时放入一个ie hack来卸载播放器。

fancybox中的Flowplayer？

3 个答案: