YumYumYum YumYumYum - 1 year ago 136
Javascript Question

Javascript - how to play the jplayer from javascript?

I am trying to play the jPlayer with Javascript but it wont play from Javascript i have to manually click the to play it.

<!DOCTYPE html>
<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() {

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"


div.jp-jplayer {
border:1px solid #009be3;

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

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

Answer Source

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.

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download