I am using several HTMLLoader to embed youtube videos in an Air app (one per loader), and when I add more than two, it causes an error in the API for all players past the second. The player seems to work fine, but the events are never called, and player.pauseVideo is undefined.
TypeError: Result of expression 'b' [undefined] is not an object.
at http://s.ytimg.com/yts/jsbin/www-embed-player-vflJ4hakx.js : 206
at http://s.ytimg.com/yts/jsbin/www-embed-player-vflJ4hakx.js : 205
at http://s.ytimg.com/yts/jsbin/www-embed-player-vflJ4hakx.js : 204
at http://s.ytimg.com/yts/jsbin/www-embed-player-vflJ4hakx.js : 199
My embed code:
function SetupYoutubePlayer(divName, videoID) {
_videoID = videoID;
_divName = divName;
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 _videoID;
var _divName;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(_divName, {
height: '100%',
width: '100%',
wmode: 'opaque',
autohide: '1',
modestbranding: '1',
frameborder: "0",
showinfo: '0',
videoId: _videoID,
playerVars: {
'wmode': 'opaque',
'rel': 0,
'autohide': 1,
'modestbranding': 1,
'frameborder': 0,
'showinfo': 0,
},
events: {
'onStateChange': onPlayerStateChange
}
});
}
It looks like you're repeatedly calling the following lines:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Those only need to be executed once, to pull in the YT.Player definition and associated API. Do things work as expected if you make sure that's only executed once?
Related
There is a problem with CasperJS. Everything works until the moment I want to fill a page of text. Write all code:
phantom.casperPath = 'path\\to\\casperjs';
phantom.injectJs(phantom.casperPath + '\\bin\\bootstrap.js');
var url = "someurl";
var someText = "text";
var casper = require('casper').create({
clientScripts: ['jquery.min.js']
});
casper.start(url, function(){
this.echo(this.getCurrentUrl());
this.wait(3000, function() {
this.click('div.but');
});
});
casper.then(function(){
this.evaluate(function(){ //сюда не заходит
document.querySelector("div.anotherElem").innerHTML = someText;
});
});
casper.then(function(){
this.capture('screen.png', {
top: 0,
left: 0,
width: 1280,
height: 1024
});
});
The function evaluate just does not execute. Use the latest version CasperJS, which integrates into PhantomJS (v1.8). Who used casper, tell me what I'm doing wrong.
I believe I need to make follow up calls to get the results I am looking for. However, I cannot get the phone number and www url for any of the results I pull up.
I am a novice and need some help explaining where in this code I can get the correct results pulled. Please see the demo site here:
http://news.yeselectric.com/gmaps-excel-master/
Here is my JS code:
var store = (function () {
var searchBox,
infowindow,
markers = [],
myLatlng = new google.maps.LatLng(50.0019, 10.1419),
myOptions = { zoom: 6, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl:false },
customIcons = { iconblue: './icons/blue.png' };
var init = function() {
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
input = (document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
searchBox = new google.maps.places.SearchBox((input));
store.listener();
},
listener = function() {
google.maps.event.addListener(searchBox, 'places_changed', function() {
//search for places
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
//set markers zero
markers = [];
$('.addaddress').empty();
//get new bounds
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
store.create_marker(place);
//append to the table
$('.addaddress').append('<tr><td>'+ place.name +'</td><td>'+ place.formatted_address +'</td><td>'+ place.formatted_phone_number +'</td><td>'+ place.website +'</td></tr>');
bounds.extend(place.geometry.location);
}
//set the map
map.fitBounds(bounds);
});
},
create_marker = function(info) {
//create a marker for each place
var marker = new google.maps.Marker({ map: map, icon: customIcons.iconblue, title: info.name, position: info.geometry.location });
//infowindow setup
google.maps.event.addListener(marker, "click", function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({content: info.name});
infowindow.open(map, marker);
});
//push the marker
markers.push(marker);
}
return {
init: init,
listener: listener,
create_marker: create_marker
};
})();
google.maps.event.addDomListener(window, 'load', store.init);
Google's API returns different place metadata, depending on which call you're using. To get more place details, you'll need to get the place's placeId and use that to make a call to place.getDetails()
Here's a more thorough answer: https://stackoverflow.com/a/9523345/2141296
I try to have more then 5 youtube video players, but after creating the second I run in some problems.
As I create the second, the first disappears, and can't figure out what's wrong.
Would really appreciate some help
Thanks!
//slide 2
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '820',
width: '707',
videoId: 'NTq1WLKuOI4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
setTimeout(function(){player.playVideo(); },8000);
}
// 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) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 29000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
slide2();
move();
}
var slide2 = function(){
setTimeout(function(){
slide3();
move();
},9000);
}
//slide3
var player;
function onYouTubeIframeAPIReady() {
player2 = new YT.Player('player2', {
height: '820',
width: '707',
videoId: 'AQx1UjLv3Ps',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
setTimeout(function(){player2.playVideo(); },8000);
}
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo2, 29000);
done = true;
}
}
function stopVideo2() {
player2.stopVideo();
}
You can't call onYouTubeIframeAPIReady() more than once. You need to initialize all your players in one onYouTubeIframeAPIReady call. Try wrapping the contents of your onYouTubeIframeAPIReady's in new named functions, and then call them all within onYouTubeIframeAPIReady.
I have a json data in my remote server,and i want to show it in table view,here is my json data
[{"offerType":"Discount","offerName":"BURBERRY - Buy 2 get 1 free on men's leather coat collectioN"},{"offerType":"Discount","offerName":"ARMANI JUNIOR- 20% off on Purchase worth INR 30000"}]
var url = "http://203.122.12.58:8080/api? username=superuser&password=superuser&action=invokeService&serviceName=offerAction&methodNa me=getMyOffers&customerId=CUS-12220&storeId=CMPNY-3376";
var win = Ti.UI.createWindow();
win = Ti.UI.currentWindow;
win.setBackgroundColor('gray');
//win.setBackgroundColor = 'white';
var table = Ti.UI.createTableView();
var tableData = [];
var json, fighters, fighter, i, row, nameLabel, nickLabel,offerType,offerName;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.length; i++) {
console.log("json = %d",i);
offerType = json[i].offerType;
row = Ti.UI.createTableViewRow({
height:'60dp'
});
nameLabel = Ti.UI.createLabel({
text:offerType,
font:{
fontSize:'24dp',
fontWeight:'bold'
},
height:'auto',
left:'10dp',
top:'5dp',
color:'#000',
touchEnabled:false
});
offerName = json[i].offerName;
nickLabel = Ti.UI.createLabel({
text:'"' + fighter.nickname + '"',
font:{
fontSize:'16dp'
},
height:'auto',
left:'15dp',
bottom:'5dp',
color:'#000',
touchEnabled:false
});
row.add(nameLabel);
row.add(nickLabel);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
how can i achieve my goal,Thanks in advance.
Akshay
Your code was pretty close. I did make a few changes so you'll have to compare them to see how to fix it. This example reads your service and displays the 2 entries in a table.
See the comments in the code detailing how it was changed.
//**** Not sure if this is an issue with formating on Stackoverflow or copy and paste, but the spaces in the URL are causing an issue.****
//var url = "http://203.122.12.58:8080/api? username=superuser&password=superuser&action=invokeService&serviceName=offerAction&methodNa me=getMyOffers&customerId=CUS-12220&storeId=CMPNY-3376";
var url = "http://203.122.12.58:8080/api?username=superuser&password=superuser&action=invokeService&serviceName=offerAction&methodName=getMyOffers&customerId=CUS-12220&storeId=CMPNY-3376";
var win = Ti.UI.createWindow();
//*****If you are calling this from another window, you may need this is your overall code, but my example I removed it.*****
//win = Ti.UI.currentWindow;
win.setBackgroundColor('gray');
//win.setBackgroundColor = 'white';
var table = Ti.UI.createTableView();
var tableData = [];
// **** Removed variable fighters because it is never used.
// **** Removed the fighter variable because it is never used.
var json, i, row, nameLabel, nickLabel, offerType, offerName;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.length; i++) {
console.log("json = %d",i);
offerType = json[i].offerType;
row = Ti.UI.createTableViewRow({
height:'60dp'
});
nameLabel = Ti.UI.createLabel({
text: offerType,
font:{
fontSize:'24dp',
fontWeight:'bold'
},
height:'auto',
left:'10dp',
top:'5dp',
color:'#000',
touchEnabled:false
});
offerName = json[i].offerName;
nickLabel = Ti.UI.createLabel({
//text:'"' + fighter.nickname + '"', ***** fighter.nickname isn't defined anywhere so it is giving an error. You defined offerName right above it so I assume that it
// was the intended variable here.
text: offerName,
font:{
fontSize:'16dp'
},
height:'auto',
left:'15dp',
bottom:'5dp',
color:'#000',
touchEnabled:false
});
row.add(nameLabel);
row.add(nickLabel);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
// Thought this might just be a test application, the table was never added to the window, so it would never be displayed so we can see the data. This is how you add the table.
win.add(table);
// I added code here to OPEN the window so I could see something displayed. Otherwise I just get the Appcelerator splash screen
win.open();
here is the script code:
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.open('http://www.google.com', function () {
var arr = page.evaluate(function () {
var pageWidth = document.body.clientWidth;
var pageHeight = document.body.clientHeight;
return [pageWidth, pageHeight];
});
console.log('pagwWidth: ' + arr[0] + '; pageHeight: ' + arr[1]);
page.render('google.pdf');
phantom.exit();
});
I'm trying to get clientWidth and clientHeight of document.body page. When I exec this script I'm getting the folowing values:
pagwWidth: 400; pageHeight: 484
Why is the width above is 400px? I think I should be wider.
Thank you for the reply. But then I don't understand the following thing. When I use viewportSize = {width: 1024, height: 800}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 1024, height: 800};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the following file:
But if I use viewportSize = {width: 400, height: 400}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 400, height: 400};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the same:
So I don't understand how does viewportSize affect to the view?
The document is affected by the viewport size and not by the paper size. Think along this line, how a web page looks like in your web browser has nothing to do with your current printer setting.
Use viewportSize if you want to influence the page layout:
page.viewportSize = { width: 1024, height: 800 };