bind a polymer template to html5 video.textTracks - html

Question

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

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