폴리머 템플릿을 html5에 바인딩 video.textTracks

모든 트랙과 큐가 폴리머로 표시되는 html5 비디오 타임 라인을 만들려고합니다.폴리머 템플릿을 html5에 바인딩 video.textTracks

이것은 지금까지 가지고있는 코드이지만 바인딩이 작동하지 않습니다. 항상 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>

편집하고있는 단서 및 트랙

출처

2014-09-19 Daniel Kipp

를 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() { 
 
     \t this.textTracks = []; 
 
     } 
 
    }); 
 
    </script> 
 
</polymer-element> 
 

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

을

당신의 접근법 중 하나의 문제는 Polymer의 mutation observers이 언제 감지 할 수 없다는 것입니다. textTracks은 $.testVideo에 추가됩니다. repeat 템플릿에 사용했던 구문도 올바르지 않습니다.

내가 사용한 접근법은 Polymer 요소 (this.textTracks)에 정의 된 배열을 프록시 종류로 사용하고 새 트랙을 추가 할 때마다 배열의 내용을 업데이트합니다.

이

은 <video>의 트랙이 addTrack() 핸들러의 외부 업데이트받을 경우, 배열이 업데이트되지 않습니다 렌더링 된 <template repeat="{{}}">가 부정확 할 것이라는 경고와 함께, 귀하의 명시된 사용하는 경우에 작동합니다.

출처

2014-09-19 18:02:20

이 예제를 잘 설명해 주셔서 감사합니다.이 접근법은 내가 처음으로 생각해 낸 것입니다. 이 시점에서이를 향상시킬 수 있다고 생각했습니다. 1. 복사를 유지할 필요없이 비디오 요소의 기존 트랙 및 큐 배열을 다시 사용하십시오. 2. 더 독립적 인 선택적 타임 라인 video 요소는 video-timeline 요소에 포함되지 않습니다. 나는 중합체 sugaring없이 이벤트 청취자와 함께 할 필요가 있다고 생각한다. –

[events] (https://developer.mozilla.org/en-US/docs/Web/)에 익숙하지 않다. Guide/Events/Media_events)가 '

감사합니다. 도움이되고 내 질문에 답변합니다. –

폴리머 템플릿을 html5에 바인딩 video.textTracks

답변

관련 문제