如何设置jPlayer的宽度和高度

时间:2012-02-12 12:35:31

标签: javascript jquery html flash jplayer

我正在使用jPlayer库,但我不知道如何设置宽度和高度

我的代码是:

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(event){
                        // $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v"

                });

请帮帮我。

3 个答案:

答案 0 :(得分:12)

未经测试,我认为您的代码应该如下所示:

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(){
                         $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v",
                    size: {
                         width: "400px",
                         height: "30px"
                    }
                });

我注意到你试图循环文件?我更改了函数调用,因为它似乎不需要(事件)。

您应该阅读:http://jplayer.org/latest/developer-guide/#jPlayer-size
大小根据给定的文件类型而变化。

答案 1 :(得分:9)

之前答案中提到的widthheight构造函数选项只会影响包含海报图片(如果是音频)或视频内容的#jquery_jplayer_1元素本身的尺寸。

这些选项不会影响您的GUI(其他所有内容 - 控件,播放列表等),其大小由CSS控制。

如果您正在使用其中一个演示jPlayer皮肤(例如“Blue Monday”),您需要非常具体的CSS选择器来覆盖其规则,或者使用!important标志..

答案 2 :(得分:1)

manual说:

  

使用设置jPlayer的宽度和高度   jPlayer({size:Object})构造函数选项。

     

使用jPlayer({sizeFull:Object})设置全屏尺寸   构造函数选项。

,而

  

<强>宽度
  字符串:(默认:[视频:“480px”] [音频:“0px”])

     

<强>高度
  字符串:(默认:[视频:“270px”] [音频:“0px”])

这意味着类似

jPlayer({size:{width: "200px", height: "200px"}})

并完成:

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(event){
                        // $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v",
                    size: {width: "200px", height: "200px"}
                });