google-youtube 在 paper-dialog-behavior 打开之前播放

Question

聚合物 1.0

我有这个自定义元素，用于播放 youtube 视频。它很好用。但是有两个问题：

YouTube 视频在 index.html 加载后立即开始播放，而不是等待 paper-dialog-behavior 打开。
关闭 paper-dialog-behavior 不会停止视频。我试过使用 pause api 作为 google-youtube 节点，但这不是一个真正的修复（视频应该停止）。

我可以使用 google-youtube api play() 作为事件侦听器 'iron-overlay-opened'，但是 play() 方法与大多数 [=40] 不兼容=] 浏览器并会产生问题。

如何让 google-youtube 元素仅在 paper-dialog-behavior 打开时播放，而不是在初始加载时播放？与解雇 paper-dialog-behavior 相同。

<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" type="css" href="../bower_components/paper-dialog-behavior/paper-dialog-common.css">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">

<dom-module id="video-player">
  <style>
     :host {
      @apply(--layout-fit);
     }
  </style>


  <template>
    <div id="insertVideoPlayer" class="layout vertical fit">
      <google-youtube style="height: 100%"
        video-id="YMWd7QnXY8E"
        rel="1"
        start="5"
        playsinline="0"
        controls="2"
        showinfo="0"
        width="100%"
        height="100%"
        autoplay="1">
      </google-youtube>
    </div>
     <paper-button dialog-dismiss style="color: white; margin-top: 0px">
      <paper-icon-button icon="arrow-back"></paper-icon-button>
    </paper-button>
  </template>

  <script>
    Polymer({
      is: "video-player",
      behaviors: [ Polymer.PaperDialogBehavior ],
      listeners: { 'iron-overlay-closed': 'bar' },
      bar: function(e) {
        console.log('hi');
        this.$$('google-youtube').pause();
      }
    });
  </script>
</dom-module>

Answer 1

删除 autoplay="1" 否则 <google-youtube> 播放器将立即在桌面浏览器上开始播放。

playsupported 属性在支持调用 play()（桌面浏览器）的平台上设置为 true，在不支持调用 play() 的平台上设置为 false （大多数移动浏览器）。有关详细信息，请参阅 the docs。

您可以检查 playsupported 并在 iron-overlay-opened 事件中调用 play()（如果支持）。如果不支持，嗯，你不能自动开始播放。

建议调用pause()停止播放。虽然底层 YouTube 播放器 API 支持 stopVideo() 方法，但它是最后的手段，会使播放器处于不一致的状态，如果您要开始播放新视频稍后。（有关详细信息，请参阅 the Player API docs。）因此，stopVideo() 未在 <google-youtube> 上公开。

google-youtube 在 paper-dialog-behavior 打开之前播放

google-youtube plays before paper-dialog-behavior is opened

javascript

youtube

polymer

polymer-1.0