使用Google環聊API播放單個Youtube視頻並與其他參與者分享

我想創建一個Google環聊應用，通過環聊按鈕（StartData）獲取YouTube視頻ID，然後與其他環聊參與者共享並觀看視頻。使用Google環聊API播放單個Youtube視頻並與其他參與者分享

工作流程：

1）點擊谷歌的視頻羣聊按鈕
2）YouTube視頻ID獲取與STARTDATA
3）獲取並保存在STARTDATA共享gapi.hangout.data國家，以便其他谷歌視頻羣聊參與者發送檢索相同的視頻。
4）添加youtube事件監聽器，以便在共享狀態下播放/暫停，以便其他參與者一起觀看YouTube視頻。

這裏是我的XML文件：

基本的谷歌的Hangouts應用

<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
<!-- Licensed under the Apache License, Version 2.0 (the "License"); you may not 
* use this file except in compliance with the License. You may obtain a copy of 
* the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 *  
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 
* License for the specific language governing permissions and limitations under 
* the License 
--> 
<ModulePrefs title="Fitcasts"> 
<Require feature="rpc" /> 
<Require feature="views" /> 
<Require feature="locked-domain" /> 
</ModulePrefs>

簡單的播放/暫停按鈕

<Content type="html"><![CDATA[  
    <script src="//talkgadget.google.com/hangouts/api/hangout.js?v=1.0"></script> 

<style type="text/css"> 
</style> 

<h2>Pause/Play Buttons for YouTube Videos</h2> 

# play pause button for youtube 
<a src="#" class="button" id="play-button">Play 
    </a> 
    <a src="#" class="button" id="pause-button">Pause 
    </a>

的iframe只是隨機視頻頂部起初我想讓它成爲一個特定的視頻一個 // STARTDATA與谷歌的視頻羣聊按鈕

<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>

它

<script> 

    // https://developers.google.com/youtube/iframe_api_reference  
    function HangoutDemo() { 
    console.log("Starting..."); 
    gapi.hangout.onApiReady.add(this.onApiReady.bind(this)); 
    } 

    HangoutDemo.prototype.onApiReady = function (event) { 
    if (event.isApiReady === true) { 
     console.log("API Ready"); 
     document.getElementById("play-button").onclick = 
     this.buttonClick.bind(this); 
     gapi.hangout.data.onStateChanged.add(// add callback for event 
     this.buttonClick.bind(this) 
    ); 
     this.buttonClick(); 
    } 
    }; 


    HangoutDemo.prototype.buttonClick = function() { 
    // global variable for the player 
var player; 

// this function gets called when API is ready to use 
function onYouTubePlayerAPIReady() { 
    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 

    // bind events 
    var playButton = document.getElementById("play-button"); 
    playButton.addEventListener("click", function() { 
    player.playVideo(); 
    }); 

    var pauseButton = document.getElementById("pause-button"); 
    pauseButton.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 

} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    }; 

    var hangoutDemo = new HangoutDemo(); 
</script> 
]]> 
</Content> 
</Module>

來源

2014-06-12 Alex Z

這是一噸的代碼。把你的問題降低到發生錯誤的地步，而不是讓我們創建你的系統。 – nook

你需要能夠設置和監控共享的視頻羣聊狀態，並採取相應的行動的Javascript部分。

所以玩家事件偵聽器可以是這個樣子：

playButton.addEventListener("click", function() { 
    gapi.hangout.data.setValue('playState','play'); 
    player.playVideo(); 
}); 

pauseButton.addEventListener("click", function() { 
    gapi.hangout.data.setValue('playState','pause'); 
    player.pauseVideo(); 
});

您還需要註冊事件處理程序將偵聽狀態更改事件和採取相應的行動。像這樣的東西可能會奏效：

gapi.hangout.data.onStateChanged.add(function(stateChange){ 
    switch(stateChange.state.playState){ 
    case 'play': 
     player.playVideo(); 
     break; 
    case 'pause': 
     player.pauseVideo(); 
     break; 
    } 
});

欲瞭解更多信息，請參見：

來源

2014-06-13 04:04:26 Prisoner

我得到它的工作。一個意見是，我將gapi.hangout.value.setValue更改爲gapi.hangout.data.setValue。我相信這只是一個錯字。感謝您的幫助 –

謝謝！我在答案中糾正了它。 – Prisoner

使用Google環聊API播放單個Youtube視頻並與其他參與者分享

回答

相關問題