观察 Polymer 上的“结束”媒体事件答案

【问题标题】：Observing "ended" media event on Polymer观察 Polymer 上的“结束”媒体事件
【发布时间】：2014-11-14 20:38:40
【问题描述】：

我正在尝试从视频播放中观察“结束”媒体事件。我的计划是在 video.ended == true 时触发一个动作。

这是模板代码：

<div id="container">
    <video id="video" width="{{width}}" autoplay>
      <source src="shamman.mp4"
              type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
    </video>
</div>
<content></content>

这里是 Javascript：

Polymer({
  author: '',

  ready: function() {
    console.log(this.$.video.ended);

    var observer = new PathObserver(this.$, 'video.ended');
    observer.open(function(newValue, oldValue) {
      console.log(newValue);
      console.log(oldValue);
    });

  }
});

第一个console.log返回ended的初始值，即“false”。第二个和第三个 console.log 永远不会执行。

【问题讨论】：

标签： javascript polymer

【解决方案1】：

我认为最实用的方法是简单地使用 html5 api。

//..still in your ready:
var vid = this.$.video;
vid.addEventListener('ended', function (e) {
     // do your thing here ...
     vid.removeEventListener('ended');
}, false);

【讨论】：

【解决方案2】：

由于ended 是一个事件，而不是您正在观看的属性，您可以像 Todd 的示例那样使用 javascript，也可以使用聚合物的事件处理语法（其优点是自动删除事件侦听器：

<div id="container">
    <video id="video" width="{{width}}" autoplay on-ended='{{videoEnded}}'>
      <source src="shamman.mp4"
              type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
    </video>
</div>
<content></content>

然后只需在您的聚合物元素定义上声明一个 videoEnded 属性。

【讨论】：