Javascript - how to play the jplayer from javascript?

Question

I am trying to play the jPlayer with Javascript but it won't play from Javascript; I have to manually click the <button> to play it.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script type="text/javascript" src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript">

    function click_me_to_play() {
      $('#play').trigger('click');
    }

    $(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",
            //ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
            //poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v, ogv",
        cssSelectorAncestor: "",
        cssSelector: {
          title: "#title",
          play: "#play",
          pause: "#pause",
          stop: "#stop",
          mute: "#mute",
          unmute: "#unmute",
          currentTime: "#currentTime",
         duration: "#duration"
        },
        size: {
          width: "320px",
          height: "180px"
        }
      });



    });
  </script>



  <style>
    div.jp-jplayer {
      border:1px solid #009be3;
    }
  </style>
</head>



<body onload="click_me_to_play();">
  <p>
    <button id="play">play</button>


  </p>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
</body>
<html>

NO. i tried that it never worked. its not the duplicate, all the old examples does not working. — , Oct 11 '16 at 06:01
Its not autoplay. i want to play it from javascript, not from Html/html5 button. — , Oct 11 '16 at 06:02
Okay, but in the Docu an in one answer they reference http://jplayer.org/latest/developer-guide/#jPlayer-play the `$(id).jPlayer( "play", [Number: time] ) : jQuery` — winner_joiner, Oct 11 '16 at 06:04

winner_joiner · Accepted Answer · 2016-10-11T08:33:42.643

0

Is hacky but worked, on the /jPlayer-2.9.2/examples/blue.monday/demo-01.html fil0e.

function click_me_to_play() {
   setTimeout(function(){ $("#jquery_jplayer_1").jPlayer("play",0); },1000);
}
 // tested on win7 Chrome 51+

I'am still looking why this works and why it doesn't work without the timeout.

Update:
So now I checked it out a bit it, the ready event of the player finishes after the body onload event. So it is only a timing issue. Alternatively you could use the loadeddata event to check if the file is loaded, and then fire the click_me_to_play function, if you want to avoid the setTimeout function, and start playing when the file is loaded.
(Details to the Events can be found jPlayer Event Docu )

Update 2:
Example, play on loadeddata Event:

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        title: "Big Buck Bunny",
         ... 
      });
    },
    ...
    loadeddata:function(){
       $("#jquery_jplayer_1").jPlayer("play",0);
    }
  });

edited Oct 11 '16 at 08:33

answered Oct 11 '16 at 06:21

winner_joiner

12,173
4
36
61

Try declaring function after the plugin instance? – zer00ne Oct 11 '16 at 06:24
You should remove the `setTimeout` from this answer and replace with and example of `loadeddata`. You don't need hacks to get this to work. – Martin Dawson Oct 11 '16 at 08:11
If the answer wouldn't have been accepted, before I posted my update, I could have changed it. Since I don't exactly now, how the code is really used, and if the `loaddata` option, would still solve the posted question, I didn't want to change the answer. So I just mentioned an alternative option, for other that may have the same issue. – winner_joiner Oct 11 '16 at 08:26

Javascript - how to play the jplayer from javascript?

1 Answers1