jPlayer is not a function
445 views
Skip to first unread message
TedN
Jan 14, 2017, 5:23:17 PM1/14/17
to jPlayer: HTML5 Audio & Video for jQuery
I've just installed jPlayer on a test site but get the above error when I open the webpage.
I've created two folders on my site server - js and skin.
The files in the js folder are: jquery.jplayer.min.js and jquery.jplayer.swf.
The folder and files in the skin folder are: pink.flag/jplayer.pink.flag.css, jplayer.pink.flag.jpg, jplayer.pink.flag.seeking.gif and jplayer.pink.flag.video.play.png.
The current jQuery library file on my site server is:
My code (copied from jPlayer Quick Start Guide) is as follows:
I've created two folders on my site server - js and skin.
The files in the js folder are: jquery.jplayer.min.js and jquery.jplayer.swf.
The folder and files in the skin folder are: pink.flag/jplayer.pink.flag.css, jplayer.pink.flag.jpg, jplayer.pink.flag.seeking.gif and jplayer.pink.flag.video.play.png.
The current jQuery library file on my site server is:
jquery-2.1.4.js. I have also tried: jquery-1.11.1.min.js, jquery-3.1.1.js and jquery-3.1.1.min.js. All bring up the same error.
The error occurs at the hilited line: $("#jquery_jplayer_1").jPlayer({
The test site URL is: http://troncon.ca/ESO/test1.html
Any help would be appreciated.
My code (copied from jPlayer Quick Start Guide) is as follows:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.1.4.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 Trailer",
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"
});
},
cssSelectorAncestor: "#jp_container_1",
swfPath: "/js",
supplied: "m4v, ogv",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video " role="application" aria-label="media player">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-details">
<div class="jp-title" aria-label="title"> </div>
</div>
<div class="jp-controls-holder">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
</div>
</div>
</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>
</body>
</html>TedN
Jan 15, 2017, 1:02:39 PM1/15/17
to jPlayer: HTML5 Audio & Video for jQuery
OK, I've found the problem. I removed two forward slashes in the <head> shown hilited:
<link type="text/css" href="/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
I now get no errors, just a small video player which doesn't have any controls. I'll check things out some more.
Reply all
Reply to author
Forward
0 new messages