2

videoページのタグの現在時刻を別のラベルで表示する必要があるHTML5ビデオを使用するアプリケーションに取り組んでいます。

ビデオのフォーマットされた時間を返すプロパティをビューで定義しようとしました。

videoCounter: function() {
    return App.seconds2String(Math.floor(App.getCurrentVideoTime() + 0.5));
}.property().volatile()

これは、ビデオの現在の時刻をmm：ssとして返します。

この関数App.getCurrentVideoTime()は、次のようにページ内のビデオ要素から現在の時刻を取得します（したがって、Emberプロパティではないため、バインドされません）。

getCurrentVideoTime: function() {
    var videoElement = document.getElementById('video');
    if (videoElement) {
        return Math.round(videoElement.currentTime * 10) / 10;
    }
    else {
        return 0;
    }
}

ハンドルバービューには

<label id="videoCounter">{{view.videoCounter}}</label>

残念ながら、値はビデオの再生時に更新されません。つまり、00:00常に表示されます。

ビデオタグの現在の時刻のみに依存する計算されたプロパティの更新をトリガーするにはどうすればよいですか？

高精度は必要ありません。タイマーはビデオの現在の時刻を秒単位で表示するだけです。

何か案は？

どうもありがとう！

トーマス

4

2 に答える 2

3

カスタムビューを使用しているかどうかを記述したコードからは明らかではありませんが、カスタムビューを作成してイベントにVideoバインドします。http ：//jsfiddle.net/pangratz666/fzNMb/を参照してください。timeupdate

ハンドルバー：

<script type="text/x-handlebars" >
    {{view App.Video width="400px" controllerBinding="App.videoController"}}
    {{App.videoController.currentTimeFormatted}}
</script>​

JavaScript：

App.Video = Ember.View.extend({
    srcBinding: 'controller.src',
    controls: true,
    tagName: 'video',
    attributeBindings: 'src controls width height'.w(),

    didInsertElement: function() {
        this.$().on("timeupdate", {
            element: this
        }, this.timeupdateDidChange);
    },

    timeupdateDidChange: function(evt) {
        var video = evt.data.element;
        var currentTime = evt.target.currentTime;
        video.setPath('controller.currentTime', currentTime);
    }
});​
于 2012-07-11T09:32:15.887 に答える
2

私が言ったことと@Zackによって言及されたsetIntervalの使用に基づいています

Jsfiddle： http: //jsfiddle.net/Sly7/xgqkL/

App = Ember.Application.create({

          // computed property based on currentTime change
          videoCounter: function(){
              return this.get('currentTime');            
          }.property('currentTime'),

          currentTime: 0
});

// increment currentTime property every second
setInterval(function(){
    App.incrementProperty('currentTime');
}, 1000);
于 2012-07-10T21:16:40.967 に答える