Youtube player Iframe API skipping videos in playlist - api

I've embed a Youtube playlist on my website.
Once a video finishes the player doesn't play the next video but skips it and plays the one after. It does it whatever the video. Why is that and how to make it play all videos one after the other ?
Here's my web site with the embed playlist : http://www.centpourcentmonnaie.fr
And here is my code :
<div class="video">
<p>
<span id="gauche" onclick="player.previousVideo()">Chapitre précédent</span>
<span id="droite" onclick="player.nextVideo()">Chapitre suivant</span>
</p>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "//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', {
height: '720',
width: '1280',
videoId: '3BuJ4RWy49k',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.cuePlaylist({list: "PLE_-2rZv8j2ro-QgxzK9nvi9O61dgE-Hx",suggestedQuality: "hd720"});
}
</script>
<br>
</p>
</div>
</div>
The console can read different things in different web browsers.

I solved my problem with this code using playerVars rather than cuePlaylist:
<script>
var tag = document.createElement('script');
tag.src = "//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', {
height: '720',
width: '1280',
videoId: '3BuJ4RWy49k',
playerVars: { 'autoplay': 1, 'list':'PLE_-2rZv8j2ro-QgxzK9nvi9O61dgE-Hx'},
});
}
</script>

Related

YouTube iFrame API “setPlaybackQuality” not working

YouTube iFrame API “setPlaybackQuality” not working.i want to change video qulity to lowest.but i cant change it by the api.i used player.setPlaybackQuality('small').it not worked.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="change_quality">Change Quality</button>
<div id="player"></div>
<script>
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', {
height: '390',
width: '640',
videoId: '6LV3JdR5aZw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$("#change_quality").click(function() {
event.target.playVideo();
var d=player.getPlaybackQuality()
console.log("before");
console.log(d);
player.setPlaybackQuality('small')
var v=player.getPlaybackQuality()
console.log("after");
console.log(v);
});
}
}
</script>
</body>
</html>
it is not working in youtube demo also
Demo

I can't change the default zoom when use kml files on google maps API

I'm showing a kml layer using the Google Maps API, it automatically zoom to the extent of the kml objects, but I need to zoom closer and I can't find the way. The ZOOM parameter doesn't work. Already tried with { preserveViewport: true }
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script>
function initialize() {
var mapOptions = {
zoom: 8,
preserveViewport: true,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://consorciohidraulico.com.ar/userfiles/kml/julieta.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="row-fluid">
<div class="span12">
<div id="map-canvas" style="height:300px;">
Mapa Google Kml</div>
</div>
</div>
The new code, according to user geocodezip, is:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script>
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://consorciohidraulico.com.ar/userfiles/kml/julieta.kml',
preserveViewport: true
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="row-fluid">
<div class="span12">
<div id="map-canvas" style="height:300px;">
Mapa Google Kml</div>
</div>
</div>
That generates a gray image without a map. Something is wrong...
The preserveViewport: true option doesn't belong in the mapOptions, it belongs in the KmlLayerOptions.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://consorciohidraulico.com.ar/userfiles/kml/julieta.kml',
preserveViewport: true
});
And if you are using {preserveViewport: true} you do need to set the initial center of the map. There are two required mapOptions, center and zoom. They can be set automatically by the KmlLayer when preserveViewport is false, but if it is true, you have to set them.
working fiddle
If you want to have the KmlLayer initialize the map, setting the center and zoom level to fit the KML, then change the zoom, you need to keep preserveViewport at its default value of false, listen for the first zoom_changed event (the KmlLayer initializing it), then set it to your desired value.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://consorciohidraulico.com.ar/userfiles/kml/julieta.kml',
preserveViewport:false
});
google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
// set the zoom level to 14.
map.setZoom(14);
});
working fiddle

Geocoding Address input Google Maps API

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 1000px; height: 600px } /* ID */
</style>
<!--Include the Maps API JavaScript using a script tag.-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//Function called when the window loads shown below in the addDomlistener
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function calcAddress(address)
{
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="text">
<input type="button" value="Search" onclick="calcAddress()" />
</div>
<div id="map-canvas"/>
</body>
</html>
I'm learning about google maps API, and I am just trying to get a simple address search to work, what am I missing? I've seen similar posts, but can't find what isn't right, might need some fresh eyes.
Varaibles map and geocoder are not visible outside of initialize() function. If you open console there is error written:
ReferenceError: geocoder is not defined
They should be made global like:
var map,
geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
Additionaly, div tag is not self-closing.
<div id="map-canvas"/>
should be changed to
<div id="map-canvas"></div>

Autoplay videos built on youtube api after show and hide

I have 4 videos built with the youtube's API on one page (
loading multiple video players with youtube api)
I need to show one video at a time so I'm hiding and showing each div id with a click in the navigation, but it appears that the videos stop playing automatically when going back to one at a later point, how can I make the videos play automatically?
<ul>
<li id="play1">Video 1</li>
<li id="play2">Video 2</li>
<li id="play3">Video 3</li>
<li id="play4">Video 4</li>
</ul>
<div id="player1"></div>
<div id="player2" style="display:none;"></div>
<div id="player3" style="display:none;"></div>
<div id="player4" style="display:none;"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player1', {
height: '390',
width: '640',
videoId: 'KcXxHZssCh4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: 'ZGDwEr0GT10',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player3 = new YT.Player('player3', {
height: '390',
width: '640',
videoId: 'Cgk-LdjxVZg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player4 = new YT.Player('player4', {
height: '390',
width: '640',
videoId: 'H5RsI3aIkVg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
$('#play1').click(function(){
$('#player1').show();
$('#player2, #player3, #player4').hide();
return false;
});
$('#play2').click(function(){
$('#player2').show();
$('#player1,#player3, #player4').hide();
return false;
});
$('#play3').click(function(){
$('#player3').show();
$('#player1,#player2, #player4').hide();
return false;
});
$('#play4').click(function(){
$('#player4').show();
$('#player1, #player2, #player3').hide();
return false;
});
</script>
http://jsfiddle.net/P2qaT
Thanks!

Error when running Google Places Autocomplete API

I'm new to the Google Places Autocomplete API, and to development in general but I'm hoping someone can help point me in the right direction. I've reviewed the Google Places documentation and example. In trying to duplicate Google's example in order to gain a better understanding (http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html), I receive the following error when I run it:
"The Google Maps API server rejected your request. The "sensor" parameter specified in the request must be set to either "true" or "false"."
What's maddening is I do have "sensor" set to "false"! Please see below for the full page code. Any advice would be greatly appreciated.
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
</style>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function () {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="map_canvas"></div>
</body>
</html>
Try this script
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>