0

I cannot find any good resources online so I am hoping someone might know here. I just need to set up jplayer to play videos. I have followed the source code of this page: http://www.jplayer.org/latest/demo-01-video/

But my player just doesnt appear - I just get a garbled mess of divs and icon images. Has anyone used this plugin before?

EDIT: Noticed I get this error in console: Uncaught TypeError: Object #<Object> has no method 'jPlayer' from within the actual jquery.jplayer.min.js file...

I made sure I have links to the .js and css files set up fine. I have the follow code in my header:

$("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
                webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            });
        },
        swfPath: "http://www.jplayer.org/2.1.0/js",
        supplied: "webmv, ogv, m4v",
        size: {
            width: "640px",
            height: "360px",
            cssClass: "jp-video-360p"
        }
    });

and I have the following in my HTML body:

<div id="jp_container_1" class="jp-video jp-video-360p">
<div class="jp-type-single">
<div class="jp-gui">
<div class="jp-video-play">
                        <a class="jp-video-play-icon" tabindex="1" href="javascript:;">play</a>
                    </div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">

                            </div>
</div>
<div class="jp-controls-holder">

<ul class="jp-controls">
<li><a class="jp-play" tabindex="1" href="javascript:;">play</a></li>
<li><a class="jp-pause" tabindex="1" href="javascript:;">pause</a></li>
<li><a class="jp-stop" tabindex="1" href="javascript:;">stop</a></li>
<li><a class="jp-mute" title="mute" tabindex="1" href="javascript:;">mute</a></li>
<li><a class="jp-unmute" title="unmute" tabindex="1" href="javascript:;">unmute</a></li>
<li><a class="jp-volume-max" title="max volume" tabindex="1" href="javascript:;">max volume</a></li>
</ul>
<div class="jp-volume-bar">

                            </div>
<ul class="jp-toggles">
<li><a class="jp-full-screen" title="full screen" tabindex="1" href="javascript:;">full screen</a></li>
<li><a class="jp-restore-screen" title="restore screen" tabindex="1" href="javascript:;">restore screen</a></li>
<li><a class="jp-repeat" title="repeat" tabindex="1" href="javascript:;">repeat</a></li>
<li><a class="jp-repeat-off" title="repeat off" tabindex="1" href="javascript:;">repeat off</a></li>
</ul>
</div>
<div class="jp-title">

<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
</div>
</div>
</div>
</div>
4

1 回答 1

0

我也遇到了同样的问题，但如果找到本教程的源代码。它在 Chrome 和 Firefox 上运行良好。但不是在 IE 7、8、9 上。我对此提出了另一个问题。

我想这个答案对你来说可能为时已晚。但在这里。

http://webdesign.tutsplus.com/tutorials/site-elements/skin-orman-clarks-video-interface-using-jplayer-and-css/

于 2013-10-03T05:12:02.450 回答