Question

聚合物1.0

我有这个用于播放YouTube视频的自定义元素。它很棒。但有两个问题：

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

我可以将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（桌面浏览器）的平台上true属性设置为play()，而在没有（大多数移动浏览器）的平台上调用false。有关详细信息，请参阅the docs。

如果支持，您可以检查playsupported并在play()事件中致电iron-overlay-opened。如果它不受支持，那么你就无法自动开始播放。

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

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

1 个答案: