To load a youtube player, I use the API in Jquery like this :
var youtube_player = document.createElement("div");
youtube_player.id = "youtube_player";
youtube_player.className = "youtube_player";
document.getElementById('media_container').appendChild(youtube_player);
var player = {
playVideo: function (container, videoId) {
if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
window.onYouTubeIframeAPIReady = function () {
player.loadPlayer(container, videoId);
};
$.getScript('//www.youtube.com/iframe_api');
} else {
player.loadPlayer(container, videoId);
}
},
loadPlayer: function (container, videoId) {
new YT.Player(container, {
videoId: videoId,
width: 356,
height: 200,
playerVars: {
autoplay: 1,
controls: 1,
modestbranding: 0,
rel: 0,
showInfo: 0
}
});
}
};
var id_youtube = get_id_youtube_by_url(url_media);
player.playVideo(youtube_player.id, id_youtube);
And this code is working, a youtube player is created in the div 'media_container'.
But now, if I want to load a youtube player from an iframe in the parent page, it doesn't work.
I think that the problem comes from the attribute "container" in load_player.
But I don't know how to make this. Have you any idea ?
Thanks a lot for your help !
Not sure if this is helpful but try using the sample in this Github repo. It includes searching and playing youtube videos. You can try this live demo and compare with your project.
Related
I have a simple Youtube API code to play videos in a playlist. All of a sudden I start getting the error like: an error occurred please try again later playback id: 2yVtrSo5yT1rs1EY
I did some searching and mainly found solutions for the PC user, like flushing cache/dns etc (I am on a windows laptop by the way).
Question: I was wondering however if it is possible to create a solution for this error(code), in the script in order to make it go to the next song? Or is this only a user based problem? I have an onPlayerError function that just makes the player go to the next song, whatever error occurs. However for the error mentioned above, it does nothing and just shows the error.
<?php
$yt_id='PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT';
$mymaxcounter = 100;
?>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
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;
var numPl = Math.floor((Math.random() * <?php echo $mymaxcounter;?>) + 1);
var playlistId = "<?php echo $yt_id; ?>";
// 3. This function creates an <iframe> (and YouTube player)
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: '390',
width: '640',
playerVars: {
autoplay: 1,
loop: 1
},
events: {
'onReady': onPlayerReady,
'onError': onPlayerError
}
});
}
// onPlayerReady
function onPlayerReady(event){
//More player vars
player.loadPlaylist( {
listType: 'playlist',
list: playlistId,
index: numPl
} );
//Set shuffle
setTimeout(function() {
player.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
// onPlayerError
function onPlayerError(){
player.nextVideo();
}
</script>
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
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>
I would like to always show the latest video from a playlist. So, only show one video on the page, but always the most recent of a playlist. When a user has uploaded a new video on YouTube, that latest video has to be shown on the webpage.
What I have so far:
HTML
<div id="yt-player"></div>
JS
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player("yt-player", {
height: "480",
width: "853",
videoId: "br6xOdlyRbM"
});
}
</script>
However, this will only post a video with a specific ID and not from a playlist. I then tried the following JS.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player("yt-player", {
height: "480",
width: "853",
playerVars: {
listType: "playlist",
list: "PLiXK3ub3Pc8_Tk0WiPpVTVmuzoZs8_SaY",
color: "white",
modestbranding: 1,
theme: "light"
},
events: {
"onStateChange": onPlayerStateChange
}
});
}
Unfortunately, this does not work either. The YouTube player is shown, but the first video is shown, and not the last. Live example here.
Getting the "last element" of a playlist might not always be what you want - it basically depends on the ordering of videos in the playlist. "Recent Uploads" is (obviously) ordered by upload date descending (newest first), others are by date ascending (oldest first).
In the latter case you have to iterate through all the pages of the playlist until you get to the last item.
There's an example that takes you almost to your target on https://developers.google.com/youtube/v3/code_samples/javascript (code excerpt copied from there):
// Retrieve the list of videos in the specified playlist.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 10
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show pagination buttons if there is a pagination token for the
// next or previous page of results.
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
$.each(playlistItems, function(index, item) {
displayResult(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
The result value nextPageToken is the most interesting one. You have to fetch all pages in order until you get to the last one - in this example you'd have to call requestVideoPlaylist multiple times until response.result.nextPageToken is empty (as this indicates that you reached the last page). The last video in the result list response.result.items is the last video of the playlist (i.e. the most recent one if its ordered by date descending).
To reduce the number of requests (they tend to take some time...) you should increase maxResults in requestOptions to 50 (this is the highest value).
This leads to code like this:
function requestLastVideo(playlistId, callback, pageToken) {
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 50
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
var nextPageToken = response.result.nextPageToken;
if (nextPageToken) {
// we didn't reach the last page yet, fetch next one
requestLastVideo(playlistId, callback, nextPageToken);
return;
}
var playlistItems = response.result.items;
if (playlistItems) {
var lastPlaylistItem = playlistItems[playlistItems.length - 1];
callback(lastPlaylistItem.snippet);
} else {
alert('There are no videos');
}
});
}
And you'd call this like so:
requestLastVideo("PL91BF7E9AD6889246", function(snippet) {
console.log('Last video id was ', snippet.resourceId.videoId);
});
You can play around with requestOptions.part to reduce the footprint of your call. With this parameter you can control which fields are present in the response. You can find more information detailling possible values in the YouTube API docs for this call.
You need to get the latest video via API then plug it into your second solution like
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player("yt-player", {
height: "480",
width: "853",
videoId: {lastVideoIDinPLAYLIST},
playerVars: {
listType: "playlist",
list: "PLiXK3ub3Pc8_Tk0WiPpVTVmuzoZs8_SaY",
color: "white",
modestbranding: 1,
theme: "light"
},
events: {
"onStateChange": onPlayerStateChange
}
});
}
Using Youtube API V3, I can extract the thumbnails of videos from a user's activity feed (using the activities list from the api).
What I am trying to achieve is, when the user clicks on the video, the video should be played. I have looked at iframes. however the activities list on the api, does not show how to get the url for the video, but a different the Videos resource shows a player.embedHtml field, however I am confused, how to integrate it to my code.
var activityId, nextPageToken, prevPageToken, videoSnippet;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsactivityId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsactivityId() {
// https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.activities.list({
// mine: '' indicates that we want to retrieve the channel for the authenticated user.
home: 'true',
part: 'snippet'
});
request.execute(function(response) {
//structure of content.details
//https://developers.google.com/youtube/v3/docs/channels#resource
console.log(response);
activityId = response.items[0].id;
requestVideoPlaylist(activityId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(home, pageToken) {
$('#video-container').html('');
var requestOptions = {
home: 'true',
part: 'snippet',
maxResults: 12
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.activities.list(requestOptions);
request.execute(function(response) {
var activityItems = response.result.items;
if (activityItems) {
// For each result lets show a thumbnail.
jQuery.each(activityItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no activities on your feed');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
var titleEl = $('<h4>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.default.url;
console.log(videoSnippet);
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
$('#video-container').append(div);
}
The activities list includes several activity types :
upload, like, favorite, comment, subscription, playlistItem, recommendation, bulletin, social ..
and only some kind of activities are related to a video. Then you can only retrieve the videoId from the contentDetails when the type of activity is related to a video. You can use the videoId to show the video.
https://developers.google.com/youtube/v3/docs/activities
You have a good example in "YouTube Topic Explorer". In this App you can retrieve the social activities and retrieve the videoId from this kind of activities
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/logged-in.js
$scope.social = function() {
$rootScope.topicResults = [];
$rootScope.spinner.spin($('#spinner')[0]);
youtube({
method: 'GET',
service: 'activities',
params: {
part: 'id,snippet,contentDetails',
home: true,
maxResults: constants.YOUTUBE_API_MAX_RESULTS
},
callback: function(response) {
if ('items' in response) {
$scope.videoIds = [];
$scope.personalizedTopics = [];
angular.forEach(response.items, function(activity) {
if ((activity.snippet.type == constants.SOCIAL_TYPE)&&(activity.contentDetails.social.resourceId.videoId)){
$scope.videoIds.push(activity.contentDetails.social.resourceId.videoId);
}
});
}
getTopicsForVideoIds();
}
});
}
and you have an example of how to show the video:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
function playVideo(container, videoId) {
var width = container.offsetWidth;
var height = container.offsetHeight;
new YT.Player(container, {
videoId: videoId,
width: width,
height: height,
playerVars: {
autoplay: 1,
controls: 2,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});