将聚合物模板绑定到html5 video.textTracks

问题描述

我尝试创建一个html5视频时间线，其中所有曲目和提示都使用聚合物显示。

I try to create a html5 video timeline where all the tracks and the cues are displayed using polymer.

这是迄今为止的代码，但是绑定不行它总是显示0的长度：

this is the code I have so far, but the binding does not work. It always displays a length of 0:

<polymer-element name="video-timeline">
    <template>
        <video id="testVideo" src="./path/to/video.webm" width="300" controls="controls"></video>
        <button on-click="{{addTrack}}">Add Track</button>
        <template bind="{{$.testVideo.textTracks}}">
            <p>Item count: {{length}}</p>
            <ul>
                <template repeat>
                    <li>{{kind}}</li>
                </template>
            </ul>
        </template>
    </template>
    <script>
        Polymer('video-timeline', {
            addTrack: function() {
                var track = this.$.testVideo.addTextTrack('metadata', 'label');
                track.mode = 'showing';
            },
        });
    </script>
</polymer-element>

一个绑定将是有用的，因为编辑提示和曲目将会

a binding would be useful because editing cues and tracks will folow

推荐答案

我会建议如下：

<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="video-timeline" attributes="src">
  <template>
    <div>
      <video id="testVideo" src="{{src}}" width="300" controls></video>
    </div>
    <button on-tap="{{addTrack}}">Add Track</button>
    <p>Item count: {{textTracks.length}}</p>
    <ul>
      <template repeat="{{textTrack in textTracks}}">
        <li>{{textTrack.kind}}</li>
      </template>
    </ul>
  </template>
  <script>
    Polymer({
      textTracks: null,
      
      addTrack: function() {
        var track = this.$.testVideo.addTextTrack('metadata', 'label');
        track.mode = 'showing';
        this.textTracks.push(track);
      },
      
      ready: function() {
      	this.textTracks = [];
      }
    });
  </script>
</polymer-element>

<video-timeline src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"></video-timeline>

您的方法的一个问题是Polymer的无法检测何时 textTracks 添加到 $。testVideo 。您使用的重复 ed模板的语法也不正确。

One of the problems with your approach is that Polymer's mutation observers can't detect when textTracks are added to $.testVideo. The syntax you were using for your repeated template was also incorrect.

我使用的方法使用数组在聚合元素（ this.textTracks ）上定义为一种代理，并在每次添加新轨道时更新数组的内容。

The approach I went with uses an array defined on the Polymer element (this.textTracks) as a sort of proxy, and updates the contents of the array each time you add a new track.

这应该适用于您指定的用例，请注意，如果您的< video> 的轨道在 addTrack（）处理程序，数组不会被更新，并且渲染的< template repeat ={{}}> 将不准确。

This should work for your stated use case, with the caveat that if your <video>'s tracks get updated outside of the addTrack() handler, the array won't be updated and the rendered <template repeat="{{}}"> will be inaccurate.

这篇关于将聚合物模板绑定到html5 video.textTracks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！