O
O
OrionShah2014-02-10 22:16:57
Opera
OrionShah, 2014-02-10 22:16:57

How to make JPlayer work correctly in Firefox and Opera?

There is a player created using the jPlayer plugin. Everything works fine in chrome, but in Firefox and Opera, the buttons are all displayed at once and, of course, nothing works.
Where to dig I do not even know. If necessary, here are the listings of the player and its styles:

<script type="text/javascript" src="Player\jquery.js"></script>
<script type="text/javascript" src="Player\jPlayer\jquery.jplayer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
 					$("#jquery_jplayer_1").jPlayer({
  						ready: function () {
   						$(this).jPlayer("setMedia", {
     						mp3: "http://bjork-radio.ru:8000/live"
      					}).jPlayer("play");
  						},
            ended: function (event) {
    					$(this).jPlayer("play");
   						},
    					swfPath: "js",
    					supplied: "mp3"
          });
          });
          </script>
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
          <div id="jp_container_1" class="jp-audio">
  					<div class="jp-type-single">
    					<div class="jp-gui jp-interface">
        					<ul class="jp-controls">
          						<li><a href="javascript:;" class="jp-play" tabindex="1"><img src="Player/play.png"/></a></li>
          						<li><a href="javascript:;" class="jp-pause" tabindex="1"><img src="Player/pause.png"/></a></li>
          						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"><img src="Player/mute.png"/></a></li>
          						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"><img src="Player/unmute.png"/></a></li>
        					</ul>
        					<div class="jp-time-holder">
          						<div class="jp-current-time"></div>
        					</div>
        					<div class="jp-volume-bar">
          						<div class="jp-volume-bar-value"></div>
        					</div>
    						<div class="jp-no-solution">
     							<span>Update Required</span>
      								To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    						</div>
  						</div>
          </div>
        </div>


.jp-jplayer{
  width:0;
}

.jp-audio {
  position:absolute;
    width: 200px;
  top: 10px;
  left: 270px;
}

.jp-title {
    font-size: 12px;
    text-align: center;
    color: #999;
}

.jp-title ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jp-gui {
  position: relative;
  background: #648700;
  height: 40px;
  -webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
    box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
    border-radius: 5px;
  overflow: hidden;
}

.jp-controls {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "FontAwesome";
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.jp-controls li {
    display: inline;
}

.jp-controls a {
    color: #fff;
}

.jp-play,.jp-pause {
    width: 60px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
}

.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
    background-color: #192100;
}

.jp-mute,.jp-unmute {
    position: absolute;
    right: 55px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 46px;
}

.jp-mute {
    text-align: left;
}
.jp-time-holder {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 90px;
    top: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.jp-volume-bar {
    position: absolute;
    right: 10px;
    top: 17px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #96B04B;
    overflow: hidden;
}

.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}
.jp-controls img{
  height: 20px;
  margin-top: 10px;	
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Y
Yuri Lobanov, 2014-02-10
@OrionShah

In short: first, you will learn how to use http://jsfiddle.net, learn how to use links - why should I copy links? Having trouble typing http:// before the site name?
These are claims on the issue.
Now - when you're told to remove all script tags and externalize scripts as an external resource - do it! Why should I do this for you?
Now, on the question, I think the problem is in the script that you connect, you either indicate the path incorrectly, or something else, maybe there is a problem in it. I connected with office. site and everything is ok.
Attention, see how to make out an example on http://jsfiddle.net, do not anger people who want to help you out of the blue.
Reference: jsfiddle.net/iiil/hRXeS/7 in ff27 it definitely works.

Y
Yuri Lobanov, 2014-02-10
@iiil

Yes, everything seems to be working.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question