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.
Related
Disclaimer: I am very new to developing (2nd year CS major), so please bear with me.
I am currently developing a chrome extension that pulls JSON data from a page and then displays the data in the extension through an HTML table.
I am using a chrome extension template that is available through Visual Studios.
Since I do not have the reputation, I cannot post the link for reference, but if you were to type "chrome extension Visual Studios" in google, it is the first link.
I am using a jQuery plugin for tables called "DataTables" that is downloaded through Visual Studios.
Whenever I run the solution from Visual Studios on a test "index.htm" file, I get this error in the console:
Uncaught SyntaxError: Unexpected token ILLEGAL
jquery.dataTables.min.js:1
popup.js:1
This is how the console reads "jquery.dataTables.min.js" Which is a file that is downloaded with the plugin and is referenced in the HTML file according to the plugin's installation instructions.
The console reads "popup.js" in the same fashion.
The Question: Why is the console reading my two files in this way?
I have looked over every single question on StackOverflow pertaining to this error and have tried every solution that was given, to no avail.
I have checked multiple times for any sign of a Unicode 200b "Zero-Width Space"
I have set the default font to Times New Roman, and have the encoding set to UTF-8 for all files.
The network diagnostic in the console shows that all these files have loaded and when I run the html file through a text editor, the solution works. I have a fully sort-able table displaying the dummy data.
I assume that most of you are familiar with the layout of a chrome extension (manifest, html file, javascript files, icon.png).
Here is the respective code for the HTML and JS (I believe the manifest and icon are irrelevant for my question)
"popup.html" HTML (Jquery/JS/CSS references and a table to hold the data):
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="app/popup.js"></script>
<link href="css/classic.css" rel="stylesheet" />
<title>Popup</title>
<body>
<table id="example" class="display" width="100"></table>
</body>
</html>
"popup.js" JAVASCRIPT (hardcoded JSON data with a function using "Datatables" library to initialize table headings)
var dataSet = [
["00001", "John", "Smith"],
["00002", "Jane", "Doe"],
["00003", "Ted", "Johnson"],
["00004", "Betty", "Smith"],
["00005", "Susan", "Wilson"],
["00006", "John", "Doe"],
["00007", "Bill", "Watson"],
["00008", "Walter", "Wright"]
];
$(document).ready(function () {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Emp. Number" },
{ title: "First Name" },
{ title: "Last Name" }
]
});
alert('If i loaded, it loaded');
});
First, may I suggest trying to load the JS file from a CDN (your display of the resource was rather odd) this is a common javascript CDN and if you are unable to do so, check to makesure that the datatables file is in fact, javascript.
Secondly, it appears as though you are loading jQuery once at the top and then again with the datatables JS (if, in fact, it is actually loading)
I am unable to get the prefetch option to work in typeahead.js. Local data works fine. Answers to previously posted questions suggest that caching could be an issue, but I have set the ttl to 0 and am testing in private browsing mode in Firefox and Chrome. What am I missing?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/typeahead.js/releases/latest/typeahead.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$('#searchText').typeahead([
{
name: 'terms',
//local: ["United States", "Canada"],
prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
ttl: 0
}
]);
});
</script>
<body>
<div class="container">
<input class="typeahead" type="text" id="searchText">
</div>
</body>
</html>
You should always check the console (Firebug / Chrome dev tools) when something is "not working", it's your best friend when working with JS.
In this case, it's not that prefetch is not working. But Github doesn't allow you to fetch that json from different domain. If you check your console, you will see this error:
XMLHttpRequest cannot load http://twitter.github.io/typeahead.js/data/countries.json. Origin http://yourdomain is not allowed by Access-Control-Allow-Origin.
So if you want to get this example working locally, you should download that JSON file and set it up locally, then change the URL a bit like:
$(document).ready(function(){
$('#searchText').typeahead({
name: 'terms',
prefetch: '/data/countries.json', // go to http//yourdomain/data/countries to make sure the path is correct
ttl: 0
});
});
Hope it helps.
I am attempting to embed a Youtube Video inside a webpage. I am using the Youtube Javascript API to embed/load the videos.
My Problem: The video embeds inside Internet Explorer but there are many javascript errors when I inspect the console. These errors mean I cannot replay the video, make the video grow, or really do anything. These javascript errors do not occur in Firefox or Chrome just IE.
Console Error:
SCRIPT87: Invalid Argument.
www-embed-player-vf1m....js line 211 character 405
Heres my JSFiddle that demonstrates the problem. Remember to RUN it in IE to see the problem.
My code:
<html>
<head>
<script src="https://www.youtube.com/player_api" type="text/javascript"></script>
<script type="text/javascript">
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '240',
width: '426',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid});
}, 500);
}
</script>
</head>
<body>
<p>Run in IE and look at console</p>
<div id="Go3u2zw6fbE"></div><script> loadYouTubeVideo("Go3u2zw6fbE"); </script>
</body>
<html>
The problem was that I was running the Javascript code from a local HTML file and not from a HTML file over the internet.
I guess when you run the Youtube Javascript API in a local HTML file (inside Internet Explorer only) the youtube video wont play. Even if I click 'Allow Javascript' it still wont play.
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.
I am using below code for sample menu.
<html>
<head>
<title>Tree Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("#main").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "json_data", "ui"],
"json_data" : {
"ajax" : {
"url" : "jsondata.json",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
}
});
$("#main").bind("open_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
});
$("#main").bind("select_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
}); */
$("#main1").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "html_data"]
});
});
</script>
</head>
<body>
<div id="main1">
<ul>
<li>Home Folder
<ul>
<li>Sub Folder1</li>
<li>Sub Folder2</li>
</ul></li>
<li>Shared Folders
<ul>
<li>Shared Folder1</li>
<li>Shared Folder2</li>
</ul></li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
when i run the above code in IE browsers it shows top of the page(below the URL bar) like
" To help protect your security , internet explorer has restricted this webpage from running scripts or Activex controls that could access your computer. click for options.. "
when i rightclick and click allowed blocked content, it runs.but i want without this popup message i need to run the code...how can i automatically run this one?...
There is a code solution too. I saw it in a training video. You can add a line to tell IE that the local file is safe. I tested on IE8 and it works. That line is <!-- saved from url=(0014)about:internet -->
For more details, please refer to https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
alert('hi');
});
</script>
</head>
<body>
</body>
</html>
I believe this will only appear when running the page locally in this particular case, i.e. you should not see this when loading the apge from a web server.
However if you have permission to do so, you could turn off the prompt for Internet Explorer by following Tools (menu) → Internet Options → Security (tab) → Custom Level (button) → and Disable Automatic prompting for ActiveX controls.
This will of course, only affect your browser.
You have two options:
Use a Mark of the Web. This will enable a single html page to load. It See here for details. To do this, add the following to your web page below the doctype and above the html tag:
<!-- saved from url=(0014)about:internet -->
Disable this feature. To do so go to Internet Options->Advanced->Security->Allow Active Content... Then close IE. When you restart IE, it will not give you this error.
If you are to use the
<!-- saved from url=(0014)about:internet -->
or
<!-- saved from url=(0016)http://localhost -->
make sure the HTML file is saved in windows/dos format with "\r\n" as line breaks after the statement.
Otherwise I couldn't make it work.
Steps to configure IE to always allow blocked content:
From Internet Explorer, select the Tools menu, then the Options...
In the Internet Options dialog, select the Advanced tab...
Scroll down until you see the Security options. Enable the checkbox
"Allow active content to run in files on My Computer".
Close the dialog, and quit Internet Explorer. The changes will take
effect the next time you start IE.
The Blocked Content is a security feature of Windows XP Service Pack 2. If you do not have SP2 installed, then you will never see this message.
From: How To Allow Blocked Content on Internet Explorer
That's something I'm not sure that you can change through the HTML of the webpage itself, it's a client-side setting to tell their browser if they want security to be high. Most other browsers will not do this but from what I'm aware of this is not possible to stop unless the user disables the feature.
Does it still do what you want it to do after you click on 'Allow'? If so then it shouldn't be too much of a problem
Alternatively, as long as permissions are not given, the good old <noscript> tags works. You can cover the page in css and tell them what's wrong, ... without using javascript ofcourse.