Looking to stream a radio station on my website, we also host the streaming but from a different domain.
Just getting this error:
Task Queue failed at step 5: Playlist could not be loaded due to crossdomain policy restrictions
Code on domain A:
<div id="mediaplayer">Loading...</div>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "/jwplayer/player.swf",
playlistfile: "http://domainB/stream.m3u",
image: "/images/listening.jpg",
type: "sound",
allowscriptaccess:"always",
width:300,
height:300
});
</script>
Just having no luck, tried a variety of options...
Am I wasting my time with out crossdomain.xml on domain B ? (of which I have no access to at the moment, but maybe able to get access to soon)
The stream works fine from itunes, winamp etc..
Okay, the problem was:
The url for the m3u file isn't the actual url for the stream.
I needed to open the m3u file in a text editor, and use that url, which included port etc.
<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>
<div id='media'></div>
<script type='text/javascript'>
jwplayer('media').setup({
'flashplayer': '/jwplayer/player.swf',
'file': 'http://xx.xxxxxx.xxx:80/xxxxfm',
'provider': 'sound',
'controlbar': 'bottom',
'image': "/images/listening.jpg",
'width': '300',
'height': '300'
});
</script>
this code seems to work, no crossdomain.xml needed, it was requesting one only because the url was incorrect.
Related
I would like to use Real Uploader to resize images before uploading them to the server.
So far everything seems to work just fine, except for the resizing of the images before upload.
I do use Django for server side, but I don't think that should be a problem. Images can be uploaded, but they are simply too big to be handled by the server.
I have tested this on Chrome and Firefox.
The way I have implemented it so far:
<head>
<script src="{% static "js/realuploader-min.js" %}"></script>
<link href="{% static 'css/realuploader/classic.css' %}" rel="stylesheet">
</head>
<body>
<h1>Page title</h1>
<div id="targetElement"></div>
<script type="text/javascript">
var uploader = new RealUploader("#targetElement",
{
url: "{% url "gallery:upload_image" object.pk %}",
accept: ["image/*"],
language: "nl_NL",
resizeImage: {
maxWidth: 100,
maxHeight: 200,
scaleMethod: 3
},
previews: false
}
);
</script>
</body>
This all seems simple enough, so I am probably missing something very simple here.
I hope someone can help me out.
Update 1
I have just found something else:
When I upload the files it shows an error message: SyntaxError: Unexpected
The files are still uploaded to the server, though.
We present video content to end users and I've recently had a user report that they are unable to view the videos (loaded using JW Player 7 self-hosted) in any of the HTML5 supported browsers (IE11 11.9.0060, Chrome 46, Firefox 42).
We have tested in these browsers repeatedly before going live and we were never able to re-create the issues reported by this end user
Here is the code that is used to instantiate the video player:
<script type="application/javascript" src="http://sharepoint-videos.s3.amazonaws.com/scripts/jwplayer.js"></script>
<script type="application/javascript" src="http://sharepoint-videos.s3.amazonaws.com/scripts/jwplayer_license.js"></script>
<link rel="stylesheet" href="http://sharepoint-videos.s3.amazonaws.com/scripts/player.css" type="text/css" media="screen" />
<div id="visualSPPlayer">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("visualSPPlayer");
playerInstance.setup({
playlist: [{
image: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002/poster.PNG",
sources: [ {
file: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002.mp4"
}],
tracks: [{
file: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002/thumbnails.vtt",
kind: "thumbnails"
}]
}],
primary: "html5",
width: "100%",
aspectratio: "16:9",
autostart: true,
skin: {
name: "vapor",
active: "#E16933",
inactive: "#E16933",
background: "#333333"
}
});
</script>
This user reports that all they see output in their browser is the: Loading the player....
Here is the error the user is reporting in the browser console:
The value of the property 'jwplayer' is null or undefined, Not a function object
My question is what could be contributing to this one user's issue with the videos loading when they load fine for my team and all other users. What should I have him look into changing?
I've had him test if Javascript is enabled successfully: https://www.whatismybrowser.com/detect/is-javascript-enabled
Can you have them try another computer in the same office? What about in an incognito window? What about on their phone in the office's wifi? Yeah i suspect the content is possibly being blocked. As #Antiga said, have them look at the network tab to see what other calls are being made, and check to see the http code, they should all be 200.
I mentioned i read the suggested link ...and Could not able to understand the
suggestion .."Use Greasemonkey to modify Pages and start writing some
javascript to modify a web page
I am loading a text file with $.ajax. When running the code on Firefox, I get the following error:
Error: ["Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "<unknown>"]
Here's my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$.ajax({ url: "demo_test.txt",
success: function (result) {
$("#div1").html(result);
},
error: function (abc) {
alert(abc.statusText);
},
cache:false
});
return false;
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
I've already read the following questions:
firefox reading web page from local JS file -- access to restricted URI denied, code: 1012, nsresult: NS_ERROR_DOM_BAD_URI
Error: [Exception... "Access to restricted URI denied" .... while calling $.ajax method
It was suggested that file system should not be used, so changed the URL to http://demo_test.txt, but that did not solve the issue.
I also heard that it might be because of a cross domain issue. If so, what exactly is meant by that, and how should I solve the problem?
Browser security prevents the code from running. You are better off running a local server such as IIS or Apache.
You can change your browser to run local content by changing a browser config
Firefox
Go to about:config
Find security.fileuri.strict_origin_policy parameter
Set it to false
I finally seems to Get it working . Here is working Script
$("button").click(function(){
$.ajax({url:"http://localhost/demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
Workaround : put the html file and text file on local server (IIS) New Site .
Using JavaScript, I want to retrieve the content of the script files. These script files remain in local(in web page).
For example.
In web page, there is a script,
<script src="tool.js"></script>
Latter, I want to get the content of tool.js and process the retrieved result (like dump its content).
I have tried to use jQuery.getScript. However, it tells me that Origin null is not allowed by Access-Control-Allow-Origin.
try an ajax like the following
$.ajax('/tool.js', {
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function() {
console.log("call failed");
}
});
You need to configure your Access-Control-Allow-Origin:
Access-Control-Allow-Origin: *
This lets you use any resource to obtain assets from an external domain. Do this first and either Mahan's or Lars's solution will work.
More info:
Access-Control-Allow-Origin Multiple Origin Domains?
try using jquery.load() and put its contents on an element and use .html()
<html>
</head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
//setup ajax to work locally
$.ajaxSetup({
crossDomain: false,
isLocal :true
});
$("#a").load('jquery.js', function() {
alert($("#a").html());
});
});
</script>
</head>
<body>
<span id="a" style="display:none;"></span>
</body>
</html>
Browser Check:
the code above works and tested in FF, Safari, Opera and IE
but if you keep on having problem with Origin null is not allowed by Access-Control-Allow-Origin then having a web server installed is needed as said here; Origin null is not allowed by Access-Control-Allow-Origin
Reference:
http://api.jquery.com/load/
code for your disposal : http://jsfiddle.net/PeaH3/1/
so this is what I need to do. So this function is called when the Flash video recorder on the page saves the video:
function onSaveOk(streamName,streamDuration,userId,cameraName,micName,recorderId){
//alert("onSaveOk("+streamName+","+streamDuration+","+userId+","+cameraName+","+micName+")");
//the user pressed the [save] button inside the recorder and the save_video_to_db.XXX script returned save=ok
//recorderId: the recorderId sent via flash vars, to be used when there are many recorders on the same web page
$('#record').hide();
$('#jwplayer').show();
}
I then have my JWplayer script that I would like to use the streamName flash var. Here is my JWPlayer script with my current attempt:
<div id="jwplayer">
<center>
<div id='mediaplayer'></div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'flashplayer': 'jwplayer/player.swf',
'id': 'playerID',
'width': '640',
'height': '580',
'provider': 'rtmp',
'streamer': 'rtmp://domain/recorder/_definst_',
'file': 'onSaveOk("+streamName+")'
});
</script>
</center>
This is where I try to use the flash var,
'file': 'onSaveOk("+streamName+")'
As it is like that, it does not work, could someone show me the correct way to do this? Thanks.
This site makes understanding and implementing a flash var as no-brainer as it gets.
Copy and paste code:
http://www.justthecodeplease.com/category/urls-flashvars/