Question

我想创建一个Google环聊应用，通过环聊按钮（StartData）获取YouTube视频ID，然后与其他环聊参与者分享和观看视频。

工作流：

1）点击Google视频群聊按钮
2）youtube视频ID与StartData发送 3）在gapi.hangout.data共享状态中检索并保存StartData，以便其他谷歌环聊参与者检索相同的视频。
4）在共享状态下添加播放/暂停的youtube事件监听器，以便其他参与者一起观看YouTube视频。

这是我的XML文件：

Google环聊应用的基本顶部

<?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>

Javascript部分

<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>

Answer 1

您需要能够设置和监控共享环聊状态并采取相应措施。

因此，玩家事件监听器可能看起来像这样：

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;
  }
});

有关详细信息，请参阅：

使用Google Hangout API播放单个Youtube视频，并与其他参与者共享

1 个答案: