bind a polymer template to html5 video.textTracks

问题

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

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

回答1:

I would suggest something like the following:

<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>

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.

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.

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.

来源：https://stackoverflow.com/questions/25935007/bind-a-polymer-template-to-html5-video-texttracks

标签

html5

video

data-binding

polymer