JWplayer Javascript interaction not working - javascript

this problem is going to make me bald. Save my hair plz.
i have been trying every possible way to stop and pause and play the JWplayer latest version using its JavaScript API and nothing works.
here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player 5 playlist</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<div id="mediaplayer">JW Player goes here</div>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "lounge warmup.3gp",
skin: "simple/simple.zip",
image: "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
controlbar: "bottom",
width: "400",
height: "8"
});
</script>
<!-- END OF THE PLAYER EMBEDDING -->
<br>
Stop playback
</body>
</html>
why this is not working??

Your code works for me (after I adjusted the "file" to something I had locally). Some possibilities:
Are you loading this with a "file://" URL, or are you loading it from an actual web server? (If from a file:// URL, there might be Flash security restrictions.)
Do you intend to have a height of 8px as you've currently specified? I don't know what your custom skin looks like. In order to see things using default skin I had to specify a larger height.
I'm not very familiar with JWPlayer, but is it possible the file parameter needs to be URL encoded? (If not sure, maybe trying removing the space from the file name and renaming it on the server as well.)
In any case, your code works for me using default skin and different media file. I can play and then click your "stop" link to stop playback. If ideas above don't help, then you'll need to specify exactly what is not working for you.

Related

Accessing jQuery within a JavaScript namespace / module pattern [duplicate]

So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??

Vimeo videos not showing up in ShadowBox

I'm at a loss for why my Vimeo videos aren't showing up in a Shadowbox.
I think I have gotten to the simplest point I know how to do, which is to copy and paste the example straight from the github page and then change the shadowbox paths to the correct places on my server (for the .js and .css files).
When I click on the link to the video, I expect the video to display in a shadowbox.
Instead, the page just goes dark (so I know shadowbox is TRYING to do something), but no video, or box appears on the screen.
I added a simple image link to the example page just to test that a simple image will work. It does.
My example code is from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html
The code is supposed to work like the Vimeo link towards the bottom here:
http://www.shadowbox-js.com/index.html
My actual working page can be found at:
http://zanezmiller.com/hidden/video-test.html
Here is the complete code to the sample page I am attempting to get to work:
(Thanks in advance for any help)
<html>
<head>
<link rel="stylesheet" type="text/css" href="/shadowbox/style.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({}, function() {
Shadowbox.setup('a[title="Egypt/Lebanon Montage"]', {
height: 360,
width: 640,
flashVars: {
clip_id: "7058755",
autoplay: "1"
}
});
Shadowbox.setup('a[title="Shows Images Work"]', {
height: 360,
width: 640
});
});
</script>
</head>
<body>
<p>This example demonstrates how to display a Vimeo video in Shadowbox.</p>
<p>Click Here</p>
<p id="foot">This file is part of Shadowbox.js.</p>
<p><a title="Shows Images Work" href="http://upload.wikimedia.org/wikipedia/en/thumb/d/dd/G2Cloud_eso1151a.jpeg/200px-G2Cloud_eso1151a.jpeg">This shows images work</a></p>
</body>
</html>
Glad it worked, I'll re-word the comment so random visitors would find it helpful as well. :)
Make sure that you build the shadowbox library with the appropriate options otherwise the specific shadowbox mode you want to use works. See: http://shadowbox-js.com/download.html

How to display variables from external JavaScript in HTML. Internet Explorer 7

I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it

JavaScript runtime error: '$' is undefined

So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??

This JavaScript code is not working in an HTML5 application

I am trying to make a simple application in HTML5 with JavaScript. It's supposed to play a random sound, when you push the button.
It works fine, when uploaded to a website, but it doesen't work on my smartphone.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function playSounds() {
var sounds = new Array(
"musik/shut the f**k up.mp3",
"musik/My gun's bigger than yours!.mp3"
);
var index = Math.floor(Math.random() * (sounds.length));
$("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"false\" />");
}
</script>
<title></title>
<meta charset="utf-8">
</head>
<body= "javascript:playSounds()">
<button onClick="playSounds()">
LAUGH</button>
<div id="element">
</div>
</body>
</html>
I copied the content in file jquery.min.js from a site and linked it directly in the application to the mainpage, where the sound needs to play.
The source is here:
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
I tried debugging the JavaScript code, but I can't seem to find the issue.
How do I solve this?
Mobile devices in general do not support <embed>.
Your use of <embed> shows you have an imperfect understanding of what an "HTML5 app" is. Such an app would use <audio> and check canPlayType("audio/mpeg") to see if the browser supports MP3 playback.

Categories

Resources