Question

我正在开发一个包含HTML5视频的应用，我必须在一个单独的标签中显示我页面的video标签的当前时间。

我尝试在视图中定义一个属性，该属性返回视频的格式化时间，如

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。

如何触发仅取决于视频标记当前时间的计算属性的更新？

我不需要高精度，定时器只能以秒为单位显示视频的当前时间。

有什么想法吗？

非常感谢你！

托马斯

Answer 1

从您说明的代码中，您是否使用自定义视图并不明显，但我会创建自定义Video视图并绑定到timeupdate事件，请参阅http://jsfiddle.net/pangratz666/fzNMb/ ：

<强>车把：

<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);
    }
});

Answer 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);

如何在Ember.js / Handlebars中显示视频时间

2 个答案: