google-youtube在打开纸面对话框之前播放

Question

聚合物1.0

我有一个定制的元素，我为播放youtube视频而制作的。效果很好。但有两个问题：

1. youtube视频在index.html加载后就开始播放，而不是等待paper-dialog-behavior打开。
2. 关闭paper-dialog-behavior并不能阻止视频。我尝试为pause节点使用google-youtube api，但这不是一个真正的修复(视频应该停止)。

我可以将google-youtube api play()用于事件侦听器'iron-overlay-opened'，但是play()方法与大多数android浏览器不兼容，因此会产生问题。

如何使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。有关更多信息，请参见医生们。

如果支持playsupported事件，可以在iron-overlay-opened事件中检查它是否为iron-overlay-opened并调用它。如果不支持，那么您就不能自动开始播放。

建议调用pause()停止播放。虽然底层的YouTube Player API支持stopVideo()方法，但它是最后的手段，使播放器处于不一致的状态，这使得您在稍后开始播放新视频时不太理想。(更多信息请参见Player API文档。)由于这个原因，stopVideo()没有在<google-youtube>上公开。