google+ 环聊直播按钮 Html 标签

Question

我有 html 普通环聊的按钮标签，但我没有 OnAir 的任何环聊按钮 html 标签。
我正在使用以下标签，但我无法获得播出按钮。

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-hangout" data-render="createhangout" type="onair"></div>

任何人都可以给我确切的 html 直播 google+ 环聊代码吗？

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-div5"></div>
<script>
gapi.hangout.render('placeholder-div5', {
  'topic': 'cats',
  'render': 'createhangout',
  'hangout_type': 'onair',
  'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
  'widget_size': 72
});
</script>

刷新页面后，我得到了空白页面。

Answer 1

要获取 Hang Out OnAir 按钮，您需要使用以下代码

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-div5"></div>

请参考jsfiddle

https://jsfiddle.net/zk755cr9/42/

Answer 2

检查您的浏览器控制台，您可能会得到

Uncaught ReferenceError: gapi is not defined

此错误肯定可以解决，如果您添加脚本以及 platform.js 这是脚本。

<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>

Answer 3

你可以使用这个：

<script src="https://apis.google.com/js/platform.js" type="text/javascript"/>
    <div id="placeholder-div5"/>
    <script>
            gapi.hangout.render('placeholder-div5', {
              'topic': 'cats',
              'render': 'createhangout',
              'hangout_type': 'onair',
              'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
              'widget_size': 72
        });
    </script>

或者这个：

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<div id="placeholder-div5"></div>
<script>
        window.onLoadCallback = function(){
        gapi.hangout.render('placeholder-div5', {
          'topic': 'cats',
          'render': 'createhangout',
          'hangout_type': 'onair',
          'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
          'widget_size': 72
    });}
</script>

Answer 4

我使用的是 normal 而不是 onAir 我认为这不会造成任何问题但是在我添加以下代码后

 <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>

喜欢下面

   <!DOCTYPE html>
<html>
<head>

</head>
<body>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<div id="placeholder-div1"></div>
<script>
  gapi.hangout.render('placeholder-div1', {
    'render': 'createhangout', 'topic':'just test topic!!!','invites':[ { 'id' : 'xxxx@gmail.com.com', 'invite_type' : 'EMAIL' },
    { 'id' : 'yyyy@gmail.com.com', 'invite_type' : 'EMAIL' }],
    'initial_apps': [{'app_id' : '184219133185', 'app_type' : 'ROOM_APP' }]
  });
</script>
</body>
</html>

我也有空白页。当我通过执行 f12 查看时我收到以下错误

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

经过大量研究发现这是因为它不在任何网络服务器中运行因此我只是从命令提示符下启动我的 python 网络服务器

python -m SimpleHTTPServer

它通过在控制台上提供以下信息在端口 80000 启动网络服务器

Serving HTTP on 0.0.0.0 port 8000 ...

然后从下面调用 hangout.html http://localhost:8000/hangout.html 它终于向我展示了按钮。粘贴这个是因为我觉得其他人可以从中得到帮助。

google+ 环聊直播按钮 Html 标签

google+ hangout OnAir button Html tag

html

javascript

google-hangouts