Youtube JS API Causes Error in Internet Explorer - javascript

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.

Related

navigator.locks.request or (LockManager.query) doesn't work in "sandbox" in firefox

The following snippet doesn't work but if you try to paste this in the developer console it will work (in firefox)! This snippet WILL however work in Chrome. (The script will Error because the Mutex times out, that error is however irrelevant)
var controller = new AbortController();
setTimeout(() => {
controller.abort();
console.error(new Error("Mutex timeout"));
}, 3000);
navigator.locks.request("t", {signal: controller.signal}, (lock) => {
console.log(lock);
return new Promise((resolve2) => {
console.log('This will not get logged in firefox.');
window.helpme=resolve2;
});
});
The firefox error is Uncaught (in promise) DOMException: LockManager.request: request() is not allowed in this context.
Why does this work outside the sandbox enviroment, but doesn't work in a sandboxed enviroment like codepen, observablehq or stackoverflow snippets (it seems to work here (firefox included) though)?
I find no firefox documentation about this.
Edit: Okay just found out, in chrome doesn't work with the stackoverflow context, however, it seems to work fine in codepen or jsfiddle (not firefox).
What is going on here?
Edit: Okay, tried to do this without a javascript sandbox, the iframe code is:
<!DOCTYPE html><head></head><body><script>navigator.locks.query().then(console.log).catch(_=>{console.log("Why is this not allowed?");throw _})</script></body>
This code returns a security error in Firefox, and in chrome the LockManager is not available at all... I don't see this documented anywhere.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>Hello, World!</h1>
<p>Welcome</p>
<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGhlYWQ+PC9oZWFkPjxib2R5PjxzY3JpcHQ+bmF2aWdhdG9yLmxvY2tzLnF1ZXJ5KCkudGhlbihjb25zb2xlLmxvZykuY2F0Y2goXz0+e2NvbnNvbGUubG9nKCJXaHkgaXMgdGhpcyBub3QgYWxsb3dlZD8iKTt0aHJvdyBffSk8L3NjcmlwdD48L2JvZHk+""></iframe>
</div>
</body>
</html>

JwPlayer with MPEG DASH

I am trying to get the jwplayer with mpeg dash support working but am having some trouble with that.
I am encountering the following error when the page loads :
Error loading player: No playable sources found.
The jwplayer player code is as follows:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',
dash: true,
width: 640,
height: 360
});
</script>
I will appreciate any feedback to help me fix this problem.
You need a div in there which anchors the location for the player:
<div id="myElement"></div>
with your script and the div element mentioned above it plays fine for me using JWPlayer7:
<div id="myElement"></div><script type="text/javascript">var playerInstance = jwplayer("myElement");playerInstance.setup({file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',dash: true,width: 640,height: 360});</script>
I tried playing DASH stream (http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) in Chrome Canary browser using online JWPlayer test player which is provided and hosted by JWPlayer themselves and stream did work for me without any issue.

how to execute JS after the page fully shown on safari

I got a JS problem, I want to excute a JS function after the whole page shown,the struct of the page such as:
<iframe id="i_frame" src="xxx.jsp"></iframe>
and the JS included in the xx.jsp:
...
<head>
...
<script type="text/javascript" src="yy.js"></script>
</head>
yy.js:
$(document).ready(function() {
var i_fram = $(window.parent.document).find('[id="i_frame"]');
$(i_fram).load(function() {
alert('trigger!');
});
});
this works well on PC(chrome), but on Iphone4s(IOS8.1, Safari), the alert trigger befor the page completely shown, even it alert befor the bottom-half of the page shown.I'd tried:"http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onpageshow", it still has this problem.
Is there something different between Safari's renderer and other browsers?

Calling a web service using the script tags

My application is built using asp classic and I've tried multiple solutions trying to fix IE 8's Service is not defined issue. The code is below.
tags:
<script language="javascript">
function init() {
service.useService("Services/Util.asmx?WSDL", "WebUtil");
}
</script>
tags:
<frameset onload="init()" id="service" style="behavior:url(Forms/Behaviors/webservice.htc)" onresult="ShowResult()" border="1" frameborder="1" framespacing="4" cols='<%= GetFrameColString()%>' topmargin="0" leftmargin="0">
Note:
The browser can not be updated due to company policy so it has to work in IE 8 and above. And if there are issues with later browsers when calling a webservice this way would help me out as well if the company decides to upgrade IE.
Anyhow can you help with IE 8's stating "service is not defined" issue?
Solved.
My original code:
<script language="javascript">
function init() {
service.useService("Services/Util.asmx?WSDL", "WebUtil");
}</script>
Modified code:
<script language="javascript">
function init() {
service.useService('Services/Util.asmx?WSDL', 'WebUtil');
}</script>
Apparently it's an syntax error. I assume ASP Classic needs single quotes over double quotes. Right now there is progress in getting my application done.

SERIALITY() plugin installation on firefox or chrome

Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/‎) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>

Categories

Resources