2017-08-08 5 views
0

YouTube APIを使用してthis tutorialからカスタムYouTubeプレイリストを作成したいと思っています。 私は基本的にclient.jsスクリプトを埋め込み、読み込み時にその関数を実行し、その後にチュートリアルで述べたようにYouTubePlayList.jsファイルも埋め込みました。 ここに私がやろうとしていることの真実があります。私はコンソールでYouTubePlayListオブジェクトを受け取っていますが、適切なデータを提供していないようです。私は動作するスクリプトの例や、それを実現する方法と、プレイリストをクライアントにレンダリングさせる方法に関するガイダンスが必要です。事前に感謝、どんな助けもありがとう!あなたはこれがあなたのチャンネルで新しいプレイリストを作成するのに役立ちますPlaylists: insertYouTubeカスタムプレイリストの問題を生成する

を訪問することができます

<pre> 

function YouTubePlayList (id, entries) { 
    this.id = id; 
    this.entries = entries; 
    this.currently_playing = 0; 
    this.randomizer = false; 
} 
var requestOptions = { 
    playlistId: 'PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe', 
    part: 'contentDetails, snippet', 
    execute: function(response) { 
     var entries = []; 
     $.each(response.items, function(key, val){ 
      var entry = {}; 
      entry.video_id = val.snippet.resourceId.videoId; 
      entry.image_src = val.snippet.thumbnails.medium.url; 
      entry.title = val.snippet.title; 
      entry.note = val.contentDetails.note; 
      entries.push(entry); 
     }); 
    } 
}; 
window['PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe'] = new YouTubePlayList('PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe', 1); 
console.log(window['PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe']); 

</pre> 

答えて

2

JS。このページには、始めるのに役立つアイディアが満載されています。以下の.jsコードなどの例もあります。

// Define some variables used to remember state. 
var playlistId, channelId; 

// After the API loads, call a function to enable the playlist creation form. 
function handleAPILoaded() { 
    enableForm(); 
} 

// Enable the form for creating a playlist. 
function enableForm() { 
    $('#playlist-button').attr('disabled', false); 
} 

// Create a private playlist. 
function createPlaylist() { 
    var request = gapi.client.youtube.playlists.insert({ 
    part: 'snippet,status', 
    resource: { 
     snippet: { 
     title: 'Test Playlist', 
     description: 'A private playlist created with the YouTube API' 
     }, 
     status: { 
     privacyStatus: 'private' 
     } 
    } 
    }); 
    request.execute(function(response) { 
    var result = response.result; 
    if (result) { 
     playlistId = result.id; 
     $('#playlist-id').val(playlistId); 
     $('#playlist-title').html(result.snippet.title); 
     $('#playlist-description').html(result.snippet.description); 
    } else { 
     $('#status').html('Could not create playlist'); 
    } 
    }); 
} 

// 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: playlistId, 
     resourceId: details 
     } 
    } 
    }); 
    request.execute(function(response) { 
    $('#status').html('<pre>' + JSON.stringify(response.result) + '</pre>'); 
    }); 
} 

YouTube Player API Reference for iframe Embedsを試してみてください。

IFrameプレーヤーAPIを使用すると、 ウェブサイトにYouTubeビデオプレーヤーを埋め込み、JavaScriptを使用してプレーヤーを制御できます。

APIのJavaScript関数を使用すると、 再生の動画をキューに入れることができます。再生、一時停止、または停止することができます。プレーヤーの音量を調整します。 または再生中のビデオに関する情報を取得します。また、プレーヤーの状態の変更やビデオ再生の品質 の変更など、特定のプレーヤーの イベントに応じて実行するイベントリスナーを に追加することもできます。

このガイドでは、IFrame APIの使用方法について説明します。 APIが送信できるさまざまなタイプのイベントの を識別し、 これらのイベントに応答するためのイベントリスナーを作成する方法を説明します。また、ビデオ プレーヤーを制御するために呼び出すことができる 異なるJavaScript関数、さらに プレーヤーをカスタマイズするために使用できるプレーヤーパラメータについても詳しく説明します。

+1

本当にありがとうございました。私が見つけたもう1つのすばらしいビデオリソースが本当に助けになりました(https://www.youtube.com/watch?v=jdqsiFw74Jk)。ここでは、送信する必要のあるリクエスト、送信する方法、後で個人用Webページに埋め込むために必要なデータオブジェクトを取得する方法についてのアイデアも得られます – bookw0rm

関連する問題