YouTube embed showing device support option - youtube

I embed Youtube videos in my angular app using two directives which make use of the YouTube Iframe API. The first loads the library async
angular.module('myApp')
.service('youTubeService', function($rootScope, $window) {
var self = this;
self.ready = false;
$window.onYouTubeIframeAPIReady = function () {
self.ready = true;
console.log("Youtube service ready");
$rootScope.$broadcast('youTubeServiceReady', true);
};
var tag = document.createElement('script');
tag.src = '//www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
I then embed the video using the javascript library
angular.module('myApp')
.directive('youtube', function (youTubeService) {
return {
link: function (scope, element, attrs) {
var player;
var playerReady = false;
var playerState;
var callback;
var carouselScope = element.parent().parent().scope();
function createPlayer() {
player = new YT.Player(element[0], {
height: attrs.height,
width: attrs.width,
videoId: attrs.youtube,
playerVars: { 'start' : attrs.starttime, 'end' : attrs.endtime, 'origin': 'https://', showinfo: 0, modestbranding: 1 },
events: {
onReady: function () {
playerReady = true;
// if (callback !== null) {
// callback();
// }
},
onStateChange: function (event) {
//console.log("Time:" + getCurrentTime() + ", Duration:" + getDuration() );
playerState = event.data;
if (playerState === YT.PlayerState.PAUSED) {
carouselScope.play();
}
}
}
});
}
if (youTubeService.ready) {
createPlayer();
} else {
scope.$on('youTubeServiceReady', function () {
createPlayer();
});
}
...
This was working for months up until yesterday but now I get the following video as my embed in all desktop browsers as documented here
https://support.google.com/youtube/answer/6098135?hl=en-GB
My problem is I can't figure out what I should be changing because as far as I understand the iframe api is the correct one. Does anyone know what I should be changing?

So we were having the exact same issue with our site.
It turns out that our client, which uses code very similar to yours above is functioning correctly. Our problem ended up being the way in which we were adding videos and video meta data to our database.
This might not be your issue, but we were using
http://gdata.youtube.com/feeds/api/videos/<video id>?v=2&alt=json
to add videos to our system. As this turns out to be a deprecated endpoint, we had to upgrade to the v3 system which is explained here: https://developers.google.com/youtube/v3/docs/videos/list

Related

onYouTubeIframeAPIReady youtube api not calling?

Hi here i just want to know why my youtube api is not working.
my program work correctly at console.log("making youtube");
So, i search a lot i fond a solution like this ""Make sure your onYouTubeIframeAPIReady function is available at the global level, not nested (hidden away) within another function.""
But I am not able to understand anyone please update my code snippet.
here is my code.
var playYoutubeVideos = function (index, videoId) {
if (typeof videoId == "undefined") {
videoId = $('#list').find('li[index="'+index+'"]').attr('data-video_id');
}
jwplayer(playerId).stop();
$('.video-div').hide();
$('.transcript-container').hide();
$('.youtube_video_div').show();
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/*$('.youtube_video_div').append('<center><iframe class="video_frame" src="https://www.youtube.com/embed/'+videoId+'?&autoplay=1" frameborder="0" allowfullscreen></iframe></center>');
animateFooterList(index);*/
console.log(videoId);
}
var vdid=videoId;
// 3. This function creates an <iframe> (and YouTube player)
//after the API code downloads.
var player;
//function onYouTubeIframeAPIReady() {debugger;
console.log("making youtube");
player = new YT.Player('yt_fram', {
height: '390',
width: '640',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
//}
console.log(player);
function stopVideo() {
player.stopVideo();
}
$('.video-div').hide();
$('.transcript-container').hide();
$('.youtube_video_div').show();
index = index + 1;
nextvideoId = $('#list').find('li[index="'+index+'"]').attr('data-video_id');
jwplayer(playerId).play();
if($('#list li[index='+index+']').hasClass('video_plus'))
{
playThis(index,'video_plus',nextvideoId);
//return;
}
else if($('#list li[index='+index+']').hasClass('ext_video'))
{
playThis(index,'ext_video','');
//return;
}
playThis(index,'','');
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log("youtube player ready");
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log("youtube player state change");
console.log("event");
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
utube api is not calling

Cordova reader.onloadend is not fired

I'm making a cross platform app with cordova.
I want to get an image from photo library and preview it on screen and upload it to server.
I could do the image is displayed on screen so far.
The problem is reader.onloadend is not fired and nothing happens.
$scope.getImage = function() {
var options = {
quality: 100,
sourceType: 0 // 0:Photo Library, 1=Camera, 2=Saved Album
};
var onSuccess = function(imageURI) {
var pic = document.getElementById('addImage');
pic.style.display = 'block';
pic.src = imageURI;
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("loaded");
};
reader.onerror = function(error) {
alert("error");
};
reader.readAsArrayBuffer(imageURI);
};
var onFail = function(message) {
alert("error");
};
navigator.camera.getPicture(onSuccess, onFail, options);
};
I've been struggling this problem for 2 days and found exactly same thread phonegap filereader onloadend doesn't work but couldn't solve yet.
Does anyone have any suggestion?
I appreciate any help.
I identified this as an issue with zone.js in Angular 2.
A workaround is to wrap FileReader object into it's own zone.
const WrappedFileReader = window.FileReader
window.FileReader = function OriginalFileReader(...args) {
WrappedFileReader.apply(this, args)
const originalInstance = this[Zone.__symbol__('originalInstance')] // eslint-disable-line
return originalInstance || this
}

YouTube iframe API - onReady and onStateChanged events not firing

I'm really having a frustrating time handling YouTube's iFrame API. Everything was working fine until yesterday, when I noticed my .playVideo() and .pauseVideo() functions throw an "undefined is not a function" error. Now, I can see that none of my functions appear to work... the events "onready" and "onstatechange" don't appear to be firing either. Here's my code:
function addVideo(index, url){
$.getScript('https://www.youtube.com/iframe_api', function(){
processPlayer();
});
function processPlayer(){
var videos = document.getElementById("videos");
var individ = document.createElement("div");
individ.setAttribute("class", "individ");
var vid = document.createElement("div");
vid.setAttribute("id","vid"+index);
individ.appendChild(vid);
videos.appendChild(individ);
var player;
function onYouTubeIframeAPIReady() {
console.log("Are we here at least?");
player = new YT.Player('vid'+index, {
height: '165',
width: '100%',
videoId: url,
playerVars: { 'controls': 0, 'showinfo': 0, 'rel': 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
window.players.push(player);
//individ.innerHTML+="Added by "+namesList[index];
individ.innerHTML+="<div style='float: left;'><span class='sname'>Let it Burn</span><br/><span class='aname'>Dave Matthews Band</span></div><div style='position: relative;'><img class='s_user' src='http://i.imgur.com/1AmnCp4.png'/></div>";
window.players.push(player);
}
onYouTubeIframeAPIReady();
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
console.log("We're ready");
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log("HI?");
if(event.data === 0) {
if(window.currentIndex < window.players.length-1){
var videoID = window.players[window.currentIndex].getVideoUrl().split("v=")[1];
window.players[window.currentIndex].cueVideoById(videoID);
window.currentIndex++;
window.players[window.currentIndex].playVideo();
}
} else if(event.data === 2 ){
onYouTubeIframeAPIReady();
}
if(!window.playing){
//alert('playing');
window.playing = true;
} else {
//alert('stopping');
window.playing = false;
}
}
function stopVideo() {
player.stopVideo();
}
}
}
Any ideas why? I'd really appreciate some help on this. The video itself loads fine, and the YTPlayer object can be called from console... yet these functions don't work, and onready/onstatechange don't fire. The iframes by default have the "origin=" bit in there, so that fix didn't work either.
I see several problems in your code, but I'm not sure which one of them is the one that's bothering you.
First of all, you're not supposed to call onYouTubeIframeAPIReady directly.
Instead, you should execute the following and let the browser do it asynchronously:
var scriptElement = document.createElement("script");
scriptElement.src = "http://www.youtube.com/iframe_api";
var firstScriptElement = document.getElementsByTagName("script")[0];
firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);
Second, I believe that you should initialize at least the following player parameters:
playerVars:
{
"enablejsapi":1,
"origin":document.domain,
"rel":0
},
events:
{
"onReady":onPlayerReady,
"onError":onPlayerError,
"onStateChange":onPlayerStateChange
}
Here is the complete relevant piece of code that I have been using:
<body onload="LoadYouTubeIframeAPI()">
<div id="player">Loading Video Player...</div>
<script type="text/javascript">
var player = null;
function LoadYouTubeIframeAPI()
{
var scriptElement = document.createElement("script");
scriptElement.src = "http://www.youtube.com/iframe_api";
var firstScriptElement = document.getElementsByTagName("script")[0];
firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);
}
function onYouTubeIframeAPIReady()
{
var playerParams =
{
playerVars:
{
"enablejsapi":1,
"origin":document.domain,
"rel":0
},
events:
{
"onReady":onPlayerReady,
"onError":onPlayerError,
"onStateChange":onPlayerStateChange
}
};
player = new YT.Player("player",playerParams);
}
function onPlayerReady(event)
{
...
}
function onPlayerError(event)
{
...
}
function onPlayerStateChange(event)
{
...
}
</script>
</body>

Setting Context Item position in Firefox addons SDK

I'm writing an extension that involving adding an item to Firefox's context menu, but it appends to the end of the menu and I couldn't find any pointers customizing item's position using Addon SDK (insertBefore/insertAfter), I know how this can be done using XUL, but I'm trying to do it using Addon SDK or some sort of Addon SDK/XUL combination
This is the code snippet related to context menu
main.js
var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;
var tabs = require("sdk/tabs");
var cm = require("sdk/context-menu");
pageMod.PageMod({
include: "*.youtube.com",
contentScriptFile: data.url("page.js"),
onAttach: function (worker) {
worker.port.emit('link', data.url('convertbutton.png'));
}});
cm.Item({
label: "Convert File",
image: data.url("bighdconverterlogo128png.png"),
context: [
cm.URLContext(["*.youtube.com"]),
cm.PageContext()
],
contentScriptFile: data.url("menu.js"),
onMessage: function(vUrl){
tabs.open(vUrl);
}
});
data/menu.js
self.on("click", function(){
self.postMessage('http://hdconverter.co/' + 'c.php?url=' + window.location.href);
});
Thanks
i dont know about sdk but for non-sdk addons its easy. but because you dont have the boiler plate setup its going to look long. add this code to your addon at the bottom:
var positionToInsertMenu = 0; //set the position you want it at here
var myLabelText = 'Convert File';
const {interfaces: Ci,utils: Cu} = Components;
Cu.import('resource://gre/modules/Services.jsm');
/*start - windowlistener*/
var windowListener = {
//DO NOT EDIT HERE
onOpenWindow: function (aXULWindow) {
// Wait for the window to finish loading
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
aDOMWindow.addEventListener("load", function () {
aDOMWindow.removeEventListener("load", arguments.callee, false);
windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
}, false);
},
onCloseWindow: function (aXULWindow) {},
onWindowTitleChange: function (aXULWindow, aNewTitle) {},
register: function () {
// Load into any existing windows
let XULWindows = Services.wm.getXULWindowEnumerator(null);
while (XULWindows.hasMoreElements()) {
let aXULWindow = XULWindows.getNext();
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
}
// Listen to new windows
Services.wm.addListener(windowListener);
},
unregister: function () {
// Unload from any existing windows
let XULWindows = Services.wm.getXULWindowEnumerator(null);
while (XULWindows.hasMoreElements()) {
let aXULWindow = XULWindows.getNext();
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
windowListener.unloadFromWindow(aDOMWindow, aXULWindow);
}
//Stop listening so future added windows dont get this attached
Services.wm.removeListener(windowListener);
},
//END - DO NOT EDIT HERE
loadIntoWindow: function (aDOMWindow, aXULWindow) {
if (!aDOMWindow) {
return;
}
var contentAreaContextMenu = aDOMWindow.document.getElementById('contentAreaContextMenu');
var myMenuItem;
if (contentAreaContextMenu) {
var menuItems = contentAreaContextMenu.querySelector('menuitem');
[].forEach.call(menuItems, function(item) {
if (item.getAttribute('label') == myLabelText) {
myMenuItem = item;
}
});
contentAreaContextMenu.removeChild(myMenuItem);
if (contentAreaContextMenu.childNodes.length >= positionToInsertMenu) { //position is greater then number of childNodes so append to end
contentAreaContextMenu.appendChild(myMenuItem);
} else {
contentAreaContextMenu.insertBefore(myMenuItem, contentAreaContextMenu.childNodes[thePosition]);
}
}
},
unloadFromWindow: function (aDOMWindow, aXULWindow) {
if (!aDOMWindow) {
return;
}
var myMenuItem = aDOMWindow.document.getElementById('myMenuItem');
if (myMenuItem) {
myMenuItem.parentNode.removeChild(myMenuItem);
}
}
};
windowListener.register();
on unload of your addon add this:
windowListener.unregister();
i copied pasted from a template and modded it real fast. for position to be accurate you probably have to consider which menuitems are hidden and which are not

Why doesn't opentok subscriber video show up in my cordova/phonegap app?

The following code works fine on a desktop browser exactly how it is, but isn't working in my phone gap/cordova app. My output says connect and iOS received stream, but nothing is showing up in the body of my app. This is in my index.js file:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
////////////////////////////////
//////Start of my opentok code////////////
var apiKey = '21692492';
var sessionId = '2_MX4yMTY5MTQ5Mn5-RnJpIEZlYiAwNyAwODozMjozOSBQU1QgMjAxNH4wLjIwMzc2MDV-';
var token = 'T1==cGFydG5lcl9pZD0yMTY5MTQ5MiZzaWc9ZWUxMTNjNjZiYjlkNWI4NTkwZTE2MDZiMjM0MzFkOWYyMzhiYzgxNjpzZXNzaW9uX2lkPTJfTVg0eU1UWTVNVFE1TW41LVJuSnBJRVpsWWlBd055QXdPRG96TWpvek9TQlFVMVFnTWpBeE5INHdMakl3TXpjMk1EVi0mY3JlYXRlX3RpbWU9MTM5MTc5MDgwNSZyb2xlPXB1Ymxpc2hlciZub25jZT0xMzkxNzkwODA1LjIzMzk0MTE4MzcyJmV4cGlyZV90aW1lPTEzOTQzODI4MDU=';
function connectedHandler(event) {
for (var i = 0; i < event.streams.length; i++) {
var newDiv = $('<div />', {id:event.streams[i].streamId});
$('body').append(newDiv);
session.subscribe(event.streams[i], event.streams[i].streamId,{});
}
}
var session = TB.initSession(sessionId);
session.addEventListener('sessionConnected', connectedHandler);
session.connect(apiKey, token);
//////End of my opentok code////////////
////////////////////////////////////////////////
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
This is the output I get:
2014-02-07 11:44:19.407 HelloCordova[2377:60b] iOS Connected to Session
2014-02-07 11:44:19.408 HelloCordova[2377:60b] object for session is {
connection = {
connectionId = "4B191468-46D5-4414-A46A-5C97376D6F2E";
creationTime = 1391791459;
};
connectionCount = 0;
environment = production;
sessionConnectionStatus = OTSessionConnectionStatusConnected;
sessionId = "2_MX4yMTY5MTQ5Mn5-RnJpIEZlYiAwNyAwODozMjozOSBQU1QgMjAxNH4wLjIwMzc2MDV-";
streams = (
);
}
2014-02-07 11:44:19.456 HelloCordova[2377:60b] iOS Received Stream
Does anyone know why this isn't working and what I need to change?
Cordova plugin is modeled after OpenTok JS 2.2. In this new version, there are several changes. First of all, 'addEventListener' has been renamed to 'on'. To add events, you can do this:
session.on({
'sessionConnected': function(event){
session.publish( publisher );
},
'streamCreated': function(event){
var newDiv = $('<div />', {id:event.stream.streamId});
$('body').append(newDiv);
session.subscribe(event.stream, event.stream.streamId, {});
}
})
Note the following changes:
* addEventListener no longer exists
* on sessionConnected events, you no longer get an array of existing streams in the session. Every stream in the session will trigger a streamCreated event.
* streamCreated event callback parameter only has 1 stream element. This event will be triggered once for every stream
Here's a list of coming v2.2 changes: http://labs.tokbox.com/javascript-2.2
I have added some working sample code for you to reference: https://github.com/songz/cordova-plugin-opentok/blob/master/README.md#sample-code

Resources