3

Codepen / jsfiddle

我有一个应用程序，它使用下一个/上一个按钮来循环浏览一堆视频。我正在使用 knockout.js 来控制 UI，因此我创建了一个自定义绑定来初始化单个视频标签，然后当敲除移动到下一个视频时，它会更新一个包含 src 对象数组的可观察对象{src:"", type:""}。

这是问题的代码。在这里，第一个视频没有音频（这是预期的），但是如果您单击“下一步”并且您打开了音频，您应该会听到一系列哔哔声 - 这是第二个视频的预期音频。但是第一个之后就没有视频了。此外，如果您尝试返回第一个，它也不起作用。

我在调试控制台中已经有了这个，customBinding 的“更新”方法中的视频对象似乎一切正常——它的源设置正确——但似乎没有一种方法能让我显示视频。

我不确定这是否是我对淘汰赛绑定做错了什么，或者我是否以某种方式误解了 video.js？

我的 customBinding 看起来像这样：

ko.bindingHandlers.video = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var videoSources = ko.utils.unwrapObservable(valueAccessor()).videos,
        playerId = allBindingsAccessor().playerId,
        options = { loop : true, controls: true, autoplay: true, preload: "auto" };

    videojs(playerId, options, function(){
        var video = this;
        video.src(videoSources).load().play();
    });
  },

  update: function(element, valueAccessor, allBindingsAccessor) {
    var videoSources = ko.utils.unwrapObservable(valueAccessor()).videos,
        playerId = allBindingsAccessor().playerId,
        video = videojs(playerId);

    video.pause().src(videoSources).load().play();
  }
};

和标记：

<div id="assessmentIntroPanel" data-bind="with: currentStep">
  <div data-bind="video: videos, playerId: 'videoPlayer'">
    <video id="videoPlayer" class="video-js vjs-default-skin" width="430" height="267">
    </video>
  </div>
</div>

有任何想法吗？

4

1 回答 1

3

我遇到了同样的问题。

如果 Knockout 绑定曾经删除视频元素（即使是暂时的），它也会破坏它们。

通过确保“with”和“if”绑定不适用于视频来解决此问题。

使用您的代码，这意味着：

<div id="assessmentIntroPanel" data-bind="with: currentStep">
  <div data-bind="video: videos, playerId: 'videoPlayer'">

  </div>
</div>
<video id="videoPlayer" class="video-js vjs-default-skin" width="430" height="267">
</video>

所以你的用户界面会更复杂......但现在视频元素永远不会被删除，它应该可以工作。

于 2013-11-26T22:39:46.133 回答