Search code examples
javascriptjquerygoogle-chromejplayer

Javascript - how to replace the play track with another clip name?

I need to play clip1, clip2, clip3 not as autoplay and not as shuffle, but later depending on some other logical condition.

The first clip1 is always working like this.

But how can i now tell jplayer to play clip2? do i have to remove the #jquery_jplayer_1 div?

if i remove it then its not working at all, because m4v: still holding only one url to the clip1

how do you change the clip1 url "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" to clip3 (others.m4v) or clip2 (etcetc.m4v) within Javascript?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
        $(this).jPlayer("setMedia", {
          title: "Big Buck Bunny",
          m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        });
      },
      swfPath: "/js",
      supplied: "m4v, ogv",
      cssSelectorAncestor: "",
      cssSelector: {
        play: "#play",
      },
      size: {
        width: "320px",
        height: "180px"
      }
    });
});
</script>

</head>
<body>
  <p>
    <button id="play">play</button>
  </p>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
</body>
<html>
Solution

  • Working.

    <script type="text/javascript" src="/js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
var pl =[];
pl[0] = {m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"};
pl[1] = {m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"};

function play1() {
  $("#jquery_jplayer_1").jPlayer("setMedia", pl[0]);
  $("#jquery_jplayer_1").jPlayer('play');
}

function play2() {
  $("#jquery_jplayer_1").jPlayer("setMedia", pl[1]);
  $("#jquery_jplayer_1").jPlayer('play');
}

$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    supplied: "m4v, webm",
    size: {
      width: "100%",
      height: "100%"
    }
  });

});
</script>

<button onclick="play1();">play1</button>
<button onclick="play2();">play2</button>

<div id="jquery_jplayer_1" ></div>