So i'm trying to implement youtube API in backbone code.
I put the API in a view and try to run everything from there
It works great in chrome but isen't running in firefox, the event that's suppose to trigger when the youtube API is done loading isen't fired. If even tried putting alert in there to see if it was context related, this alert would run in chrome but not in firefox.
Anyone seen anything like this before?
I'm using backbone 0.9 and the youtube iframe api
live example: http://alpha.mychannls.com/channel/8
relevant code
App.Views.youtubePlayer = Backbone.View.extend({
defaults: {
'wmode': 'transparent',
'height': '420',
'width': '740',
'volume': '40',
'playerVars': {
'wmode': 'transparent',
'origin': 'http://www.youtube.com',
'enablejsapi': 1,
'autoplay': 0,
'controls': 1,
'iv_load_policy': 3,
'showinfo': 0,
'rel': 0,
'allowfullscreen': 1,
'allowtransparency': 'yes'
}
},
initialize: function(options) {
//bind youtubeplay event to play method
this.collection.bind('youtubePlay', this.play, this);
//bind youtubestop to stop method
this.collection.bind('youtubeStop', this.stop, this);
//extend this.o so the options are globally accessable
this.o = $.extend(true, this.defaults, options);
this.render();
},
render: function() {
//create a new youtube player
var view = this;
console.log("this is run by firefox");
this.ytplayer = new window.YT.Player('ytplayer', {
'events': {
'onReady': view.onPlayerReady,
'onError': view.onError,
'onStateChange': view.onPlayerStateChange
}
});
return this;
},
//when youtube player is ready to run
onPlayerReady: function(e){
console.log('this function isent run in firefox');
//start the first video
App.videos.youtubeready();
}
});
outside the backbone code because youtube api player needs to be declared global
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
App.youtubeplayer = new App.Views.youtubePlayer( { el: '#ytplayer' , collection : App.videos } );
}
entire code can be found here
http://alpha.mychannls.com/js/channel.js
I think I found the answer to the problem. I implemented this and it actually works great now. Here's the gist of it:
Firefox has 2 separate implementations of an IFrame. The first implementation is before the onload event is triggered by the browser. The second is after the onload event. What this means for Backbone/Angular or other event driven javascript application frameworks that operate after the onload event is the Youtube IFrame API implementation of adding the IFrame dynamically to your page will not work.
The solution I found was also located on in the YT IFrame API documentation, but you wouldn't know it.
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
See the section after the JS, about creating the IFrame tag yourself? It is exactly right! So all you need to do is have the IFrame in your page when the page is sent from the server (ie: your index.html) or whichever main file you're using.
In your case, it looks like you've got a Backbone/Marionette app, so this solution should work fine for you.
<iframe id="player" type="text/html" width="1" height="1"
src="http://www.youtube.com/embed/?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
Something like the above code placed inside your main document and referenced from the Backbone app will work.
Good luck, just respond back if you need more help.
Jeff: FWIW - this IFrame/Firefox problem has existed since at least 2005 (the date of the obscure post I found). You might want to note it in the IFrame documentation for dynamic single page Javascript application developers, as this isn't easy to debug.
Related
Since a couple of days, code which worked fine to embed a YouTube video via Javascript stopped working. Now the video loads but it is not playable (the play button is not clickable), with this error in the console:
Uncaught TypeError: a.g.mX is not a function
at O_ (https://www.youtube.com/yts/jsbin/player-en_US-vfl8LqiZp/base.js:3796:24)
at new P_ (https://www.youtube.com/yts/jsbin/player-en_US-vfl8LqiZp/base.js:3791:111)
at new c2 (https://www.youtube.com/yts/jsbin/player-en_US-vfl8LqiZp/base.js:3985:268)
at new i2 (https://www.youtube.com/yts/jsbin/player-en_US-vfl8LqiZp/base.js:4005:210)
at i2.create (https://www.youtube.com/yts/jsbin/player-en_US-vfl8LqiZp/base.js:6950:321)
at zh.<anonymous> (https://www.youtube.com/yts/jsbin/www-embed-player-vflxTxlSH/www-embed-player.js:428:269)
at zh.k.lb (https://www.youtube.com/yts/jsbin/www-embed-player-vflxTxlSH/www-embed-player.js:428:308)
at Dh (https://www.youtube.com/yts/jsbin/www-embed-player-vflxTxlSH/www-embed-player.js:426:143)
at zh.k.pa (https://www.youtube.com/yts/jsbin/www-embed-player-vflxTxlSH/www-embed-player.js:419:176)
at https://www.youtube.com/yts/jsbin/www-embed-player-vflxTxlSH/www-embed-player.js:461:420
The JS code is as follows:
document.getElementById('player').setAttribute("style","height:"+(window.innerHeight * 0.87)+"px;");
document.getElementById('youtube_frame').src="http://www.youtube.com/player_api";
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: "100%",
width: "100%",
videoId: start_video,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player_ref = event.target;
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
event.target.loadVideoById(start_video);
}
}
Playback also broke on another prototype that I run. Everything used to work fine until a couple of days ago. I cannot find anything online, perhaps someone can shed some light?
----- UPDATE ----
Embedding playback is broken again:
Uncaught TypeError: a.g.setActionHandler is not a function
at M_ (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3788:24)
at new N_ (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3783:111)
at new a2 (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3978:367)
at new g2 (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3999:210)
at g2.create (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:6995:333)
at Gi.<anonymous> (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:269)
at Gi.l.jb (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:308)
at Ki (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:505:143)
at Gi.l.oa (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:498:176)
at https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:557:378
The issue has been resolved by Google and now YouTube videos play ok!
Wonder what happened?
----- UPDATE 23/02/2017 ------
Embedding playback is broken again:
Uncaught TypeError: a.g.setActionHandler is not a function
at M_ (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3788:24)
at new N_ (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3783:111)
at new a2 (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3978:367)
at new g2 (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:3999:210)
at g2.create (https://www.youtube.com/yts/jsbin/player-en_US-vflqOi6vK/base.js:6995:333)
at Gi.<anonymous> (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:269)
at Gi.l.jb (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:308)
at Ki (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:505:143)
at Gi.l.oa (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:498:176)
at https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:557:378
I have this problem in Chrome 56.0.2924.87 (64-bit) when "experimental functions" are enabled.
base.js:7046 Uncaught TypeError: a.g.setActionHandler is not a function
at bY (https://www.youtube.com/yts/jsbin/player-ru_RU-vfleBND20/base.js:3618:24)
at new cY (https://www.youtube.com/yts/jsbin/player-ru_RU-vfleBND20/base.js:3613:111)
at new z1 (https://www.youtube.com/yts/jsbin/player-ru_RU-vfleBND20/base.js:3983:268)
at new j2 (https://www.youtube.com/yts/jsbin/player-ru_RU-vfleBND20/base.js:4044:209)
at Object.j2.create (https://www.youtube.com/yts/jsbin/player-ru_RU-vfleBND20/base.js:7045:317)
at Object.ytplayer.load (https://www.youtube.com/watch?v=n-AdoTkXwbc:241:75024)
at https://www.youtube.com/watch?v=n-AdoTkXwbc:241:75172
at https://www.youtube.com/watch?v=n-AdoTkXwbc:241:75181
We can disable this option here: chrome://flags/#enable-experimental-web-platform-features
-- UPDATE 10.03.2017 --
Chrome 57.0.2987.98 (64-bit) is published today and works fine!
Whatever the current problem is it is related to the MediaSession object while trying to attach an event (play in this case). This object is internal to Chrome so it seems something is corrupt there.
I'm seeing the same problem on any other website that uses YouTube - so don't waste your time trying to debug your own site. That's not the problem.
I've rebooted and tried to disable all extensions. Not seeing any fixes yet.
Mainly wanted to post this so people don't waste time thinking their code is bad.
It seems that new YT.Player() is working in development but not production.
var player = new YT.Player(domId, {
events: {
onReady: function() {
// because of a bug in the youtube iframe api
var p;
player.addEventListener('onStateChange', function(e) {
if (e.data === 1) {
p = $interval(function() {
var elapsedTime = Math.floor(player.getCurrentTime());
$scope.skim.sections[len-1].startTime = elapsedTime;
setHMS($scope.skim.sections[len-1], elapsedTime);
}, 1000);
}
else {
$interval.cancel(p);
}
});
console.log("onReady fired");
updateStartTimeAndSeekTo($scope.skim.sections[len-1]);
player.pauseVideo();
}
}
});
This code is supposed to update some input fields when the video plays. It does this in development, but not production.
This is the live page. This is a video explaining how it is supposed to work. And this is the relevant GitHub code.
I really don't know how to debug this.
For some reason the console.log() statements don't seem to be appearing in production. Without those I don't know what to do.
I checked the network tab and it seems that the api code is being downloaded successfully.
And heroku logs shows no errors.
<iframe style="height: 156.443444006753px;" src="https://www.youtube.com/embed/3eMA0GvpXl0?showinfo=0&enablejsapi=1&origin=http://localhost:9000" ng-class="{ 'unloadedFrame': !skim.videoUrl }" class="subsection-iframe" responsive-height="" resize-on-load="" allowfullscreen="" frameborder="0" ng-src="skim.embedUrl" id="subsection-0-0"></iframe>
Check the iframe source url contain origin=http://localhost:9000 hardcoded. If you removed the origin parameter from url. It started working.
The problem could be in the production environment config file. Adding
config.assets.debug = true to production.rb fixed it for me.
An issues popped up in the last few days with the YouTube embed API. The issue is that when you embed a video with the official API, it simply doesn't allow you to access to the API. When you try to access to the API, you got error message on the log (IOS) and if you try to play the video through the API the video blacks out. If you load it via the API, but you do not use the API, the user is able to play the video with tap.
The issue persist on the following browsers:
IOS 7 Safari on iPad and iPhone
IOS 7 Chrome on iPad and iPhone
Android 4 Chrome
(My play button uses the API to play the video and that produce the error)
JSfiddle: http://jsfiddle.net/frdd8nvr/6/
Error message:
Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net.
postMessage[native code]:0
Jwww-widgetapi.js:26:357
Nwww-widgetapi.js:25
(anonymous function)[native code]:0
html5player.js:1201:97
Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Some debug info:
As I see the API create the iframe on the site. The src is sometime http and sometime https.
http://www.youtube.com/embed/ZPy9VCovVME?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net&autoplay=0&modestbranding=1&wmode=opaque&forceSSL=false
My test showed that most of the times YouTube servers simply LOCATION: https://... the request to the https url, but around 10% they served the http request with proper content.
I think somehow the issue related with the forced https, but I was not able to figure out the solution.
Have you experienced the same? Do you have some kind of solution for this problem? Is it a YouTube bug?
My test code:
<div id="myvideo"></div>
<button id="play-button">Play</button>
JS:
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
onYouTubeIframeAPIReady = function () {
var vars = {
enablejsapi: 1,
origin: window.location.protocol + "//" + window.location.host,
autoplay: 0,
modestbranding: 1,
wmode: "opaque",
forceSSL: false
};
if (+(navigator.platform.toUpperCase().indexOf('MAC') >= 0 && navigator.userAgent.search("Firefox") > -1)){
vars.html5 = 1;
}
var playerobj = new YT.Player('myvideo', {
videoId: 'ZPy9VCovVME',
wmode: 'opaque',
playerVars: vars,
events: {
onReady: function(){
$('#play-button').on('click', function(){
playerobj.playVideo();
});
//playerobj.playVideo();
},
onStateChange: function(state){
switch(state.data){
case YT.PlayerState.PLAYING:
break;
//case YT.PlayerState.PAUSED:
case YT.PlayerState.ENDED:
break;
}
}
}
});
}
First, I think this is a duplicate of the following question: YouTube IFrame API play method doesn't work before touch on some Android tablets
I could reproduce the same problem on the YouTube Player Demo page.
The error
Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net.
is only occuring on your jsfiddle. On the demo page this error is not occuring, therefore your observed bug seems not to be related to the error logged in the console. I checked this with chrome on Android 4.4.4.
Workaround
I have a dirty workaround which works on chrome on Android 4.4.4 (Nexus5) and 4.1.2 (S2). I have no iOS Device to test this. The workaround works on my phones, because the video always starts the second time I click the play-button.
http://jsfiddle.net/kjwpwpx8/6/
I can always start the video on click-Events after the playVideo function was called once before. In my workaround I put two iframes on the page. One is hidden while the other one is visible. If the page is viewed by a mobile browser I call the playVideo function of the second video after the OnReady-Event. The video won't play as the browser blocks this.
Now when our play-button is pressed the first video becomes hidden and stopped and the second video becomes visible and the playVideo function is called again.
Here is the important code:
var playerOptions = {
videoId: 'ZPy9VCovVME',
wmode: 'opaque',
playerVars: vars,
events: {}
};
var playerobj1 = new YT.Player('myvideo1', playerOptions);
var playerobj2 = null;
playerOptions.events.onReady = function(){
$('#play-button').on('click', function(){
$("#videowrapper .video1wrapper").hide();
playerobj1.stopVideo();
$("#videowrapper .video2wrapper").show();
playerobj2.playVideo();
});
if(isMobileBrowser)
playerobj2.playVideo();
};
playerobj2 = new YT.Player('myvideo2', playerOptions);
For awhile now, a piece of javascript I wrote which listens to youtube actions on a certain page worked wonderfully. I am using Youtube's iframe js api: https://developers.google.com/youtube/iframe_api_reference .
But one recent content addition, a specific youtube video, the tracking wouldn't work. The events won't fire at all.
In the console, I noticed this post message error:
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
So nothing with my own code helped. Some questions here on stackoverflow suggested this is an issue with initiating new YT.player too soon, so I tried a whole bunch of things like loading the yt js api file on window load and only apply the api after, but that didn't seem to do any good either.
I know this post is 3 years old, but for those who are still searching for an answer:
Add this script and everything works fine:
<script src="https://www.youtube.com/iframe_api"></script>
I've had the same problem with jwplayer and fixed it with that script.
It took me over an hour, but the answer was right in front of me. It's actually pretty self explained: You cannot use youtube's js api to track an iframe video without www. I don't know why, it certainly does not say so in their documentation.
I tested this a few times and confirmed, as of now, tracking an iframe with the source www.youtube.com/embed/0GN2kpBoFs4 would work wonderfully while tracking youtube.com/embed/0GN2kpBoFs4 will throw:
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
The confusing part of course is that both the video load and play fine. It's only the API which is not working properly.
fiddle - http://jsfiddle.net/8tkgW/ (Tested on chrome / mountain lion)
Btw, while writing this answer I came across YouTube iframe API: how do I control a iframe player that's already in the HTML? - notice this guy's fiddle. He wrote his own youtube iframe implementation (wow!). If you change the iframe source address in the fiddle to one without www, it will work. This only means youtube writes bad js. Bad bad bad!
Don't forget to add it to the whitelist:
<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>
<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>
The youtube api documentation recommend to load the api like this
var tag = document.createElement('script');
tag.src = "http://youtube.com/iframe_api";
tag.id = "youtubeScript";
var firstScriptTag = document.getElementsByTagName('script')[1];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
But getting this error:
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com
Here is the best solution I found from [a now-dead site]:
So add this first at the top before calling the Api
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}
if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}
if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();}
else
{l.push(f);}};
window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};
YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};
var a = document.createElement('script');
a.type = 'text/javascript';
a.id = 'www-widgetapi-script';
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflumC9r0/www-widgetapi.js';
a.async = true;
var b = document.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a, b);})();}
//===========THEN=============================
function onYouTubeIframeAPIReady () {// do stuff here}
Been trying 4 hours to solve this out.
I've a really strange problem: SWFObject embeds flash good in all browsers except IE.
I printed the HTML of each outputted div into a textarea, and found out that in IE, SWFObject embeds the root "object" tag only, without any inner tags (such a param name="movie" value="myVal"), so I guess this is why I get "movie not loaded" in IE.
My code as follows:
window.embedFlash=function (properties)
{
swfobject.addDomLoadEvent(function ()
{
swfobject.createSWF(
{
data: properties.data,
width: properties.width||'100%',
height: properties.height||'100%'
},
{
allowScriptAccess: 'always',
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
flashvars: properties.flashvars||null,
wmode: properties.wmode||null,
menu: properties.menu||'false'
},properties.id);
});
};
Usually "movie not loaded" means Flash Player AVM instance has started, but the URL you provided can't be found.
Also, your SWF version may be out of sync with the Flash Player version in IE.
Check if you get any 404s and check if the compiled SWF version is runnable in the FP version installed to IE.
You're basically recreating the swfobject.embedSWF method, so I suggest reformatting your code to use swfobject.embedSWF, as it is widely supported and heavily tested. The only differences I see between your code and embedSWF are:
lack of version detection in your
code (embedSWF requires you to
specify a minimum version of Flash
Player
lack of expressinstall in your
code (this can be set to false in
embedSWF if you're not interested
your flashvars variable is probably
formatted as a string, whereas embedSWF
expects an object containing key/value pairs
swfobject.embedSWF gets invoked on domload by default, so you wouldn't need to write an ondomload handler
Here's a quickie reformat of your code. It will fail if your flashvars are sent as a string:
window.embedFlash=function (properties)
{
var flashvars = properties.flashvars||false;
var params = {
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
allowScriptAccess: 'always',
menu: properties.menu||'false',
wmode: properties.wmode||"window"
};
var attributes = {};
swfobject.embedSWF(properties.data,
properties.id,
properties.width||'100%',
properties.height||'100%',
"9",
false,//URL for expressinstall, if available
flashvars,
params,
attributes);
};