I performed oAuth to access private videos from youtube API.
I'm able to play the videos with URL: www.youtube.com/watch?v={videoId}&access_token={access_token}
But I'm unable to find out how to add the access token in the Youtube Player API (Javascript).
Below is the code I'm using to load the youtube player, I've tried to add access_token I got from User OAuth in 2 places as shown in the code, but none works.
new YT.Player("youtube-placeholder", {
videoId: this.videoId,
access_token: this.access_token,
playerVars: {
// "access_token": this.access_token,
"controls": 0,
"cc_load_policy": 0,
"iv_load_policy": 3,
"rel": 0,
"disablekb": 1,
"enablejsapi": 1,
"fs": 0,
"modestbranding": 1,
"playsinline": 1
},
events: {
'onReady': this.initTimes.bind(this),
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
Can someone please let me know how to do it, if at all possible.
Thank you,
Related
I have updated Youtube video by using Youtube data api.I got successful response from api. I have updated my video title and also added cards with api. I can see title was updated instantly but not able to find added cards on Youtube video.
I have tried below given code with node.js api.I have not received any errors and api call was success. But video title was updated successfully from same api and cards are not visible on video
async function addInfoCardsToVideo(videoId) {
try {
// First, retrieve the video's current metadata
const video = await youtube.videos.list({
part: 'snippet',
id: 'myexistingvideoid', // This is my existing Youtube video id
});
// Next, construct the new metadata object with the info card data
const infoCard = {
kind: 'youtube#video',
videoId: videoId,
card: {
teaser: {
startTimeMs: 10000, // The time in milliseconds where the teaser begins
endTimeMs: 30000, // The time in milliseconds where the teaser ends
},
cards: [
{
teaserTitle: 'Info Card Title',
teaserDurationMs: 5000, // The duration of the teaser in milliseconds
teaserStartTimeMs: 20000, // The time in milliseconds where the teaser should be displayed
type: 'video',
videoId: 'othervideoid', // The video ID for the video you want to link to
},
],
},
};
// Update the video's metadata to add the info card
const update = await youtube.videos.update({
part: 'snippet',
resource: {
id: videoId,
snippet: {
...video.data.items[0].snippet,
localized: {
...video.data.items[0].snippet.localized,
},
cards: infoCard,
title:'updated video title'
},
},
});
console.log(`Successfully updated video: ${videoId}`);
} catch (err) {
console.error(`Error updating video: ${err}`);
}
}
addInfoCardsToVideo('myexistingvideoid') //passing my existing Youtube video id ]
Kindly help
I have a page where users can paste a Youtube video url and then I need to extract the video's ID in order to get the video's thumbnail image. The hard part is to get a reliable way of extracting the video ID from the video url. There are a number of regex solutions here but for me none of these are 100% reliable. Here's a few:
JavaScript REGEX: How do I get the YouTube video id from a URL?
Youtube API - Extract video ID
It's like a contest of who has a longer regex. I feel like the right way would be to get this information from Youtube's api, but looking at it, seems like this option is not available:
https://developers.google.com/apis-explorer/#p/youtube/v3/
As you can see everything is based on the video id. I find it ridiculous that I need the actual video ID to get any information about the video since no real world user will ever even know what the video id is. Vimeo has this feature built into their API. Here is an example:
https://vimeo.com/api/oembed.json?url=https://vimeo.com/29474908
Does anyone have a solution for this that does not involve some regular expression?
Doing a search with the API works with different YouTube URL types. The URL is passed as the query term q.
https://www.googleapis.com/youtube/v3/search/?key=<YOUR_KEY>&part=snippet&q=youtu.be/M7lc1UVf-VE
Maybe some case could result in more than one item, but the normal search result is just one match:
{
kind: "youtube#searchListResponse",
etag: ""m2yskBQFythfE4irbTIeOgYYfBU/j2Px-5q--mgJEsrfjg4L0Mgn_L8"",
regionCode: "ES",
pageInfo: {
totalResults: 1,
resultsPerPage: 5
},
items: [
{
kind: "youtube#searchResult",
etag: ""m2yskBQFythfE4irbTIeOgYYfBU/_1gFVi_i_djlS4OZWPGtcZ3iSLQ"",
id: {
kind: "youtube#video",
videoId: "M7lc1UVf-VE"
},
snippet: {
publishedAt: "2013-04-10T17:25:04.000Z",
channelId: "UC_x5XG1OV2P6uZZ5FSM9Ttw",
title: "YouTube Developers Live: Embedded Web Player Customization",
description: "On this week's show, Jeff Posnick covers everything you need to know about using player parameters to customize the YouTube iframe-embedded player.",
thumbnails: {
default: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/default.jpg",
width: 120,
height: 90
},
medium: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/mqdefault.jpg",
width: 320,
height: 180
},
high: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/hqdefault.jpg",
width: 480,
height: 360
}
},
channelTitle: "Google Developers",
liveBroadcastContent: "none"
}
}
]
}
I tested with some of the URL variations from this answer and most worked:
var urls = [
'//www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=channel',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'https://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', // <---- invalid
'https://youtu.be/M7lc1UVf-VE',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=youtu.be',
'https://youtu.be/M7lc1UVf-VE',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=channel',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'https://www.youtube.com/ytscreeningroom?v=M7lc1UVf-VE', // <---- invalid
'https://www.youtube.com/embed/M7lc1UVf-VE?rel=0',
'https://www.youtube.com/watch?v=M7lc1UVf-VE',
'https://youtube.com/v/M7lc1UVf-VE?feature=youtube_gdata_player',
'https://youtube.com/vi/M7lc1UVf-VE?feature=youtube_gdata_player', // <---- invalid
'https://youtube.com/?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtube.com/?vi=M7lc1UVf-VE&feature=youtube_gdata_player', // <---- invalid
'https://youtube.com/watch?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtube.com/watch?vi=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtu.be/M7lc1UVf-VE?feature=youtube_gdata_player'
];
var my_key = '<YOUR_KEY>';
function getUri(uri){
$.get('https://www.googleapis.com/youtube/v3/search/?key='+my_key+'&part=snippet&q='+uri, function(data) {
if(data.items.length !== 0)
console.log(data.items[0].snippet.publishedAt);
else
console.warn('no items for',uri)
});
}
for (i = 0; i < urls.length; ++i) {
getUri(urls[i]);
}
I used some code to find the latest video from a specific channel, I have a basic idea of how it works, but I’m not sure how it sources the video. If someone could explain that'd be great
<!--Latest video-->
<h1 class="title"> Latest video </h1>
<div id="static_video"></div>
<!--Source the latest vdeo-->
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='720' height='480' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/UC9DiuD3z0btMOAMG_FvDRag/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
It can be seen here
Another help would be, how can I show all the videos, with a search box to, well search through them. Sorry if I seem greedy but it would be a MASSIVE help if some one could explain.
EDIT: Bump, I don't like bumping, but I need this answered, please help me!
First the API V2 is deprecated, you need to use the YouTube API v3 with the ressource search.list
You need an API Key, follow this link to get one.
Use this parameters to get the lastest upload of the channel :
part: 'snippet' or 'id'
channelId: 'UC9DiuD3z0btMOAMG_FvDRag'
maxResults: 1
order: date
https://www.googleapis.com/youtube/v3/search?part=id&channelId=UC9DiuD3z0btMOAMG_FvDRag&maxResults=1&order=date&key={YOUR_API_KEY}
The output :
"items": [
{
"kind": "youtube#searchResult",
"etag": "\"PSjn-HSKiX6orvNhGZvglLI2lvk/9r2l5FZB6-ysy9_0d37qYA5Kg8I\"",
"id": {
"kind": "youtube#video",
"videoId": "WH8U2NQ_fnA"
}
}
Then you have the last video ID of the channel.
After that, you need to use the YouTube API player.
A live example to show you how the player works : http://jsbin.com/vajobawiba/1/edit?html,js,output
You just need to copy that code with the video ID you get from the previous step !
Example :
Add this line at the end of the body in your index.html
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
And there is the javascript example:
function googleApiClientReady() {
var apiKey = 'YOUR_API_KEY',
youtubeId,
request;
gapi.client.setApiKey(apiKey);
gapi.client.load('youtube', 'v3', function() {
request = gapi.client.youtube.search.list({
part: 'id',
channelId: 'UC9DiuD3z0btMOAMG_FvDRag',
maxResults: 1,
order: date
});
request.execute(function(response) {
if(response.pageInfo.totalResults != 0) {
youtubeId = response.result.items[0].id.videoId;
}
});
});
}
I am trying to get the creation time of a YouTube video in my account using the YouTube API 3. From the API docs (https://developers.google.com/youtube/v3/docs/videos), calling videos->list with the part "fileDetails" should return an element "creationTime":
The date and time when the uploaded video file was created. The value is specified in ISO 8601 format.
I have uploaded a file to YouTube that I know from ffprobe has a "creation_time" tag:
"format": {
"filename": "test.mp4",
"nb_streams": 2,
"format_name": "mov,mp4,m4a,3gp,3g2,mj2",
"format_long_name": "QuickTime / MOV",
"start_time": "0.000000",
"duration": "1.920000",
"size": "1126058",
"bit_rate": "4691908",
"tags": {
"major_brand": "isom",
"minor_version": "0",
"compatible_brands": "isom3gp4",
"creation_time": "2013-06-12 11:08:34"
}
}
which is presumably where YouTube would calculate their "creationTime" value...
However, the YouTube API fileDetails for this file shows:
fileDetails: {
fileSize: "1126058",
fileType: "video",
container: "mov",
videoStreams: [
{
widthPixels: 1280,
heightPixels: 720,
frameRateFps: 29.9167,
aspectRatio: 1.7777777777778,
codec: "h264",
bitrateBps: "5946814",
rotation: "clockwise"
}
],
audioStreams: [
{
channelCount: 2,
codec: "aac",
bitrateBps: "129487"
}
],
durationMs: "1438",
bitrateBps: "6076301",
}
Should the creationTime element not be in the fileDetails part for this video? Do all videos not get this element?
FYI: I am using the php implementation of YouTube API 3 and I have authorized my page to access my account.
It's not 100% guaranteed that file creation time will be available for all videos.
There is also a chance that you may be using older version of the PHP client library.
Try with API explorer to see, if the API returns creation time for your videos.
This seems to be a recurring issue as there have been a number of similar posts on the YouTube API Google Group over the past couple of years. Using the YouTube iFrame API (only tried HTML5 not Flash) the onStateChange event fires correctly (and calls the specified handler), but the data property passed is undefined. I'm running OS X Mountain Lion and the error occurs using both Chrome (23.0.1271.64) and Safari (6.0.2).
Any thoughts on what the issue might be would be most appreciated.
Selected code snippets
myapplication.controllers.Player = function(containerId, videoId) {
[...]
this.player = new YT.Player(this.currentView_.playerContainer_, {
videoId: videoId,
playerVars: { 'showinfo': 0, 'modestbranding': 1, 'rel': 0 },
suggestedQuality: 'medium'
});
[...]
goog.events.listen(this.player, 'onStateChange', this.onPlayerStateChange_,
false, this);
[...]
};
myapplication.controllers.Player.prototype.onPlayerStateChange_ = function(e) {
if (e.data == 1) {
this.startTimer_(100);
} else {
this.stopTimer_();
};
};