Javascript 将视频添加到用户';s";“以后再看”;YouTube上的播放列表
其目的是使用YouTube API创建一个“以后观看”按钮。当用户单击该按钮时,视频将保存到用户的Watch Later播放列表中。类似于在自己的网站上实现类似Facebook的按钮时的工作方式 到目前为止,我们在API文档中有两个正式条目:Javascript 将视频添加到用户';s";“以后再看”;YouTube上的播放列表,javascript,php,video,youtube,youtube-api,Javascript,Php,Video,Youtube,Youtube Api,其目的是使用YouTube API创建一个“以后观看”按钮。当用户单击该按钮时,视频将保存到用户的Watch Later播放列表中。类似于在自己的网站上实现类似Facebook的按钮时的工作方式 到目前为止,我们在API文档中有两个正式条目: :描述一种形成XML文本格式的方法,该格式可自动将视频添加到“以后观看”播放列表中 我们有很多关于API文档的信息 如何使用PHP或/和javascript实现这一点 我不知道这是否会对你有多大帮助,因为我从未使用过Youtube的API。但是看看如
- :描述一种形成XML文本格式的方法,该格式可自动将视频添加到“以后观看”播放列表中
如何使用PHP或/和javascript实现这一点 我不知道这是否会对你有多大帮助,因为我从未使用过Youtube的API。但是看看如何使用Youtube的API v3获取手表播放列表的答案 然后,您可以从Youtube文档中查看在给定播放列表中插入元素的情况 无论如何我不确定这是否可行(您可以尝试一下),因为: 参考清单中的第2.2点: 频道资源的contentDetails.relatedPlaylists.watchHistory和contentDetails.relatedPlaylists.watchLater属性现在分别包含所有频道的HL和WL值 需要明确的是,这些属性仅对检索有关用户自己频道的数据的授权用户可见。属性始终包含值HL和WL,即使对于检索有关用户自己频道的数据的授权用户也是如此。因此,无法通过API检索观看历史记录和观看后期播放列表ID 此外,为频道的观看历史记录或以后观看的播放列表检索播放列表详细信息(playlists.list)或播放列表项目(playlitems.list)的请求现在返回空列表。对于新值HL和WL,以及API客户端可能已经存储的任何观看历史记录或观看以后的播放列表ID,此行为都是正确的
Watch Later播放列表是id为
WL
的播放列表。您可以使用与其他Youtube播放列表相同的方式将视频添加到此播放列表
您首先需要访问您的:
- 为您的项目启用Youtube数据API
- 生成一个
Oauth客户端ID
https://www.googleapis.com/auth/youtube
scope,然后将视频添加到您的手表播放列表中
对于以下Javascript和PHP示例,当按下按钮时,如果尚未通过身份验证,它将登录用户,并将视频添加到已验证用户的watch later播放列表中
Javascript 这是基于谷歌提供的api样本 是一个现场演示(如下所示) 这是一把小提琴。在开发人员控制台中替换客户端id并添加为授权的JavaScript源代码: : php脚本:
检索“以后观看”播放列表:
正如其他人所指出的,YouTube不再允许这样做
将视频添加到同一列表是相当直接的:
您可以在此处找到Javascript代码片段和更多内容:
考虑到问题的复杂性,我将在两天内对这个问题进行至少100分的奖励,只要它符合条件。到目前为止,您尝试了什么?你哪里有错误?非常感谢你的回复。我正在jsbin上测试这个。有没有办法用一个按钮(类似于Facebook的按钮)来更新这个答案,当你点击它时,它会将一个特定的YouTube视频添加到Watch Later播放列表中。如果用户已注销,则会加载一个弹出窗口以允许用户登录;然后将其添加到播放列表中。到目前为止,我的问题是如何流畅地完成登录过程。我已经根据您的要求更新了我的帖子,请看现场演示。请注意,当用户第一次登录时,输入文本中的videoId
随即添加到播放列表中,然后可以在不使用登录弹出窗口的情况下添加更多视频授权重定向URI
,因为认证成功后,您不想将用户重定向到其他页面。您必须使用基本URI指定一个授权的JavaScript源
,就像我的例子https://bertrandmartel.github.io
用于。对于上面的小提琴链接,您可以使用https://fiddle.jshell.net
啊,你明白了,我的朋友。再次感谢您花时间发布这个非常完整的答案。您可以将对单击按钮的引用存储为全局变量,或者将其传递给回调函数。是一个具有全局变量的解决方案
<!doctype html>
<html>
<head>
<title>Add to Watch Later playlist</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
.btn-tech {
color: #2c3e50;
border: solid 2px #2c3e50;
background: transparent;
transition: all 0.3s ease-in-out;
margin: 20px;
border-radius: 20% 20% 20% 20%;
}
.btn-tech:hover,
.btn-tech:active,
.btn-tech.active {
color: #FFFFFF;
background: #2c3e50;
cursor: pointer;
}
</style>
</head>
<body>
<div id="watch_later">
<div id="buttons">
<label>Enter Video ID you want to add to Watch Later playlist :
<input id="video-id" value='T4ZE2KtoFzs' type="text" />
</label>
</div>
<div class="like">
<a id="fb-link">
<span class="btn-tech fa-stack fa-3x">
<i class="fa fa-thumbs-up fa-stack-1x"></i>
</span>
</a>
</div>
<div id="playlist-container">
<span id="status"></span>
</div>
<p>
<a href="https://www.youtube.com/playlist?list=WL">check your watch later playlist</a>
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var OAUTH2_CLIENT_ID = '28993181493-c9o6hdll3di0ssvebfd4atf13edqfu9g.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
var init = false;
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// Handle the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
$('.like').off('click');
$('.like').click(function(e) {
if (authResult && !authResult.error) {
addVideoToPlaylist();
} else {
init = true;
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
}
return false;
});
if (authResult && !authResult.error) {
// Authorization was successful. Hide authorization prompts and show
// content that should be visible after authorization succeeds.
$('.pre-auth').hide();
$('.post-auth').show();
loadAPIClientInterfaces();
$('#add_to_wl').click(function(e) {
addVideoToPlaylist();
});
}
}
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
if (init) {
init = false;
addVideoToPlaylist();
}
});
}
// Add a video ID specified in the form to the playlist.
function addVideoToPlaylist() {
addToPlaylist($('#video-id').val());
}
// Add a video to a playlist. The "startPos" and "endPos" values let you
// start and stop the video at specific times when the video is played as
// part of the playlist. However, these values are not set in this example.
function addToPlaylist(id, startPos, endPos) {
var details = {
videoId: id,
kind: 'youtube#video'
}
if (startPos != undefined) {
details['startAt'] = startPos;
}
if (endPos != undefined) {
details['endAt'] = endPos;
}
var request = gapi.client.youtube.playlistItems.insert({
part: 'snippet',
resource: {
snippet: {
playlistId: "WL",
resourceId: details
}
}
});
request.execute(function(response) {
console.log(response);
if (!response.code) {
$('#status').html('<pre>Succesfully added the video : ' + JSON.stringify(response.result) + '</pre>');
} else if (response.code == 409) {
$('#status').html('<p>Conflict : this video is already on your Watch Later playlist</p>');
} else if (response.code == 404) {
$('#status').html('<p>Not Found : this video hasnt been found</p>');
} else {
$('#status').html('<p>Error : code ' + response.code + '</p>');
}
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
composer require google/apiclient:~2.0
<?php
/**
* Library Requirements
*
* 1. Install composer (https://getcomposer.org)
* 2. On the command line, change to this directory (api-samples/php)
* 3. Require the google/apiclient library
* $ composer require google/apiclient:~2.0
*/
if (!file_exists(__DIR__ . '/vendor/autoload.php')) {
throw new \Exception('please run "composer require google/apiclient:~2.0" in "' . __DIR__ .'"');
}
require_once __DIR__ . '/vendor/autoload.php';
session_start();
$response = "";
/*
* You can acquire an OAuth 2.0 client ID and client secret from the
* {{ Google Cloud Console }} <{{ https://cloud.google.com/console }}>
* For more information about using OAuth 2.0 to access Google APIs, please see:
* <https://developers.google.com/youtube/v3/guides/authentication>
* Please ensure that you have enabled the YouTube Data API for your project.
*/
$OAUTH2_CLIENT_ID = 'YOUR_CLIENT_ID';
$OAUTH2_CLIENT_SECRET = 'YOUR_CLIENT_SECRET';
$client = new Google_Client();
$client->setClientId($OAUTH2_CLIENT_ID);
$client->setClientSecret($OAUTH2_CLIENT_SECRET);
$client->setScopes('https://www.googleapis.com/auth/youtube');
$redirect = filter_var('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'],
FILTER_SANITIZE_URL);
$client->setRedirectUri($redirect);
// Define an object that will be used to make all API requests.
$youtube = new Google_Service_YouTube($client);
// Check if an auth token exists for the required scopes
$tokenSessionKey = 'token-' . $client->prepareScopes();
if (isset($_GET['code'])) {
if (strval($_SESSION['state']) !== strval($_GET['state'])) {
die('The session state did not match.');
}
$client->authenticate($_GET['code']);
$_SESSION[$tokenSessionKey] = $client->getAccessToken();
header('Location: ' . $redirect);
}
if (isset($_SESSION[$tokenSessionKey])) {
$client->setAccessToken($_SESSION[$tokenSessionKey]);
}
// Check to ensure that the access token was successfully acquired.
if ($client->getAccessToken()) {
try {
$videoId = "";
if (isset($_GET['video'])){
$videoId = $_GET['video'];
}
else if(isset($_SESSION['video'])){
$videoId = $_SESSION['video'];
}
if(isset($videoId) && !isset($_GET['state'])) {
file_put_contents('php://stderr', print_r("adding video to watch later playlist " . $videoId . "\n", TRUE));
$playlistId = "WL";
// 5. Add a video to the playlist. First, define the resource being added
// to the playlist by setting its video ID and kind.
$resourceId = new Google_Service_YouTube_ResourceId();
$resourceId->setVideoId($videoId);
$resourceId->setKind('youtube#video');
// Then define a snippet for the playlist item. Set the playlist item's
// title if you want to display a different value than the title of the
// video being added. Add the resource ID and the playlist ID retrieved
// in step 4 to the snippet as well.
$playlistItemSnippet = new Google_Service_YouTube_PlaylistItemSnippet();
$playlistItemSnippet->setTitle('First video in the test playlist');
$playlistItemSnippet->setPlaylistId($playlistId);
$playlistItemSnippet->setResourceId($resourceId);
// Finally, create a playlistItem resource and add the snippet to the
// resource, then call the playlistItems.insert method to add the playlist
// item.
$playlistItem = new Google_Service_YouTube_PlaylistItem();
$playlistItem->setSnippet($playlistItemSnippet);
$playlistItemResponse = $youtube->playlistItems->insert(
'snippet,contentDetails', $playlistItem, array());
$response = json_encode($playlistItem);
$_SESSION['video'] = "";
}
else{
file_put_contents('php://stderr', print_r("no video was specified", TRUE));
}
} catch (Google_Service_Exception $e) {
$response = htmlspecialchars($e->getMessage());
} catch (Google_Exception $e) {
$response = htmlspecialchars($e->getMessage());
}
$_SESSION[$tokenSessionKey] = $client->getAccessToken();
} else {
if(isset($_GET['video'])){
$_SESSION["video"] = $_GET['video'];
// If the user hasn't authorized the app, initiate the OAuth flow
$state = mt_rand();
$client->setState($state);
$_SESSION['state'] = $state;
$authUrl = $client->createAuthUrl();
header('Location: ' . $authUrl);
}
}
?>
<!doctype html>
<html>
<head>
<title>Add to Watch Later playlist</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
.btn-tech {
color: #2c3e50;
border: solid 2px #2c3e50;
background: transparent;
transition: all 0.3s ease-in-out;
margin: 20px;
border-radius: 20% 20% 20% 20%;
}
.btn-tech:hover,
.btn-tech:active,
.btn-tech.active {
color: #FFFFFF;
background: #2c3e50;
cursor: pointer;
}
</style>
</head>
<body>
<div id="watch_later">
<form id="form" action="watchlater.php"">
<label>Enter Video ID you want to add to Watch Later playlist :
<input id="video-id" name="video" value='T4ZE2KtoFzs' type="text" />
</label>
<div>
<span class="btn-tech fa-stack fa-3x" onclick="javascript:document.getElementById('form').submit();">
<i class="fa fa-thumbs-up fa-stack-1x"></i>
</span>
</div>
</form>
<div id="playlist-container">
<?php echo $response ?>
</div>
<p>
<a href="https://www.youtube.com/playlist?list=WL">check your watch later playlist</a>
</p>
</div>
</body>
</html>
curl --request POST \
'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=[YOUR_API_KEY]' \
--header 'Authorization: Bearer [YOUR_ACCESS_TOKEN]' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--data '{"snippet":{"playlistId":"WL","position":0,"resourceId":{"kind":"youtube#video","videoId":"M7FIvfx5J10"}}}' \
--compressed