2

我正在开发一个带有 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。

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

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

有任何想法吗？

太感谢了！

托马斯

4

2 回答 2

3

从您声明是否使用自定义视图的代码中并不明显，但我会创建一个自定义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);
    }
});​
于 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 回答