i get an empty array when i call the youtube getAvailableQualityLevels() function, but why?
The video has many quality-levels like 360p 480p ... 720p
DEMO:
http://jsbin.com/eyexah/1/edit
YT API Doc https://developers.google.com/youtube/js_api_reference#GettingReference
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" language="javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "youtube_player" };
swfobject.embedSWF('http://www.youtube.com/v/ZGx2WUbhnyM?enablejsapi=1&playerapiid=ytplayer&version=3',
'youtube',
'425',
'356',
'8',
null,
null,
params,
atts);
</script>
<script type="text/javascript" language="javascript">
function onYouTubePlayerReady()
{
console.log('# onYouTubePlayerReady');
var ytp = document.getElementById("youtube_player");
var getQuali = ytp.getAvailableQualityLevels();
console.log(getQuali);
};
</script>
</head>
<body>
<div id="youtube"></div>
</body>
</html>
This would work if the state would be playing (or 1).
add a listener for onStateChange events in your onYouTubePlayerReady function:
ytp.addEventListener('onStateChange', 'onPlayerStateChange');
and add the onPlayerStateChange function, for example:
function onPlayerStateChange(event)
{
var getQuali = ytp.getAvailableQualityLevels();
}
See a working example based on your code: http://jsbin.com/eyexah/6/edit
You can retrieve when the state is 'playing.'
Check onPlayerStateChange(event)
Related
I have a problem while loading views using ui-router in cordova ios build. I'm using cordova angular in my application. The ui-router working fine in android build but while i'm running the app using cordova emulate ios the views not getting loaded.
here is my code looks like,
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Awesome material design app</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" href="lib/ionic/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ngPercentDisplay.css">
<script src="node_modules/angular/angular.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"> </script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-touch.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/controller.js"></script>
<script src="js/router.js"></script>
</head>
<body ng-app="YourApp">
<div layout="column">
<ng-include src="'templates/partials/sidebar.html'" style="top:0px" ng-if ="lang =='ENGLISH'"></ng-include>
<ng-include src="'templates/partials/sidebar-right.html'" style="top:0px" ng-if ="lang =='ARABIC'"></ng-include>
<div ui-view></div>
</div>
</body>
</html>
The router.js file looks like below
app.config(['$urlRouterProvider', '$stateProvider','$compileProvider', function($urlRouterProvider, $stateProvider,$compileProvider) {
$urlRouterProvider.otherwise('/signup');
$stateProvider.state('signup', {
url:'/signup',
templateUrl: 'templates/sign-up.html',
controller: 'signupCtrl'
});
}]);
The index.js file looks like
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
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);
}
};
app.initialize();
controller.js looks like below,
'use strict';
var app = angular.module( 'YourApp', [ 'ngMaterial','ui.router']);
app.controller('myCtrl',['$scope',function ($scope) {
$scope.detail={};
$scope.detail.name="MyApp";
$scope.detail.desc="welcome to my app!";
}]);
Please help me if any one knows about this issue. Thanks in advance.
Trying to download PDf file using examples at https://parall.ax/products/jspdf
Relevant HTML Code is as shown below.
It keeps giving error as "Uncaught TypeError: Cannot read property 'config' of undefined jspdf.debug.js
Uncaught TypeError: Cannot read property 'canvas' of undefined" and doesn't generate any PDF file.
Thanks for your help.
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/dist/jspdf.debug.js"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/from_html.js?"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/canvas.js?"></script>
function downloadPDF() {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#overview_tab').first();
var specialElementHandlers = {
'#banking_tab': function(element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
This code works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function saveAspdf() {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
}
</script>
<body>
<p id="to-pdf">Generating PDF</p>
</body>
</html>
<input type="button" value="save" onclick="javascript:saveAspdf()"/>
I am customising a video player using the youtube player javascript API:
<html>
<head>
</head>
<body>
<iframe src="http://www.youtube.com/v/M7lc1UVf-VE?version=3&enablejsapi=1" frameborder="0"></iframe>
<script type="text/javascript" charset="utf-8">
function onYouTubePlayerReady(){
console.log('done')
}
</script>
</body>
</html>
done is not printed in console, what am I missing?
You have to include the iframe javascript library; once that's injected, it will automatically call a function named onYouTubeIframeAPIReady ... within that function you will create a player object that you bind to your iframe, and it can have event listeners (such as notifying you when the player is ready). Soemthing like this:
<html>
<head>
</head>
<body>
<iframe id="player" src="http://www.youtube.com/v/M7lc1UVf-VE?version=3&enablejsapi=1" frameborder="0"></iframe>
<script type="text/javascript" charset="utf-8">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onYouTubePlayerReady
}
});
}
function onYouTubePlayerReady(){
console.log('done');
}
</script>
</body>
</html>
I'm working on an windows 8 app in html5 and now I'm stuck with the map that is going to find the users location I don't know whats wrong, it says it some error I hope someone can help me because I have more to work on and i have a deadline on this project
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BingMapsJSIntro</title>
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- BingMapsJSIntro references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<!-- Bing Maps references -->
<script type="text/javascript"
src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
<!-- Our Bing Maps JavaScript Code -->
<script src="/js/bing.js"></script>
</head>
<body>
<div id="myMap"></div>
</body>
</html>
bing.js
var map;
function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var map = new Microsoft.Maps.Map($("mymap")[0],
{
credentials: "MYBINGMAPCODE",
center: new Microsoft.Maps.Location(latitude, longitude),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 10
});
var center = map.getCenter();
var pin = new Microsoft.Maps.Pushpin(center, { width: 50, height: 50, draggable: false });
map.entities.push(pin);
}
//Initialization logic for loading the map control
(function () {
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();
Your modules callback method "GetMap" is non-existant in the code you provided.
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
You need something like...
function GetMap ()
{
var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
var map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions );
}
I'm building a simple application which will mark the states in India depending to state name.
So, I started with experimenting as the following example.
It works good if I set the displayMode : 'markers' but according to their documentation states can be display as regions.
But, its not working. Am I doing something wrong?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State'],
['West Bengal'],
]);
var options = {
region: 'IN',
displayMode: 'regions',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You need to set your options to resolution: 'provinces'
Here is the code (working):
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Data'],
['West Bengal', 5],
]);
var options = {
region: 'IN',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>