Question

Codepen / jsfiddle

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

Here is a codepen of the problem。这里，第一个视频没有音频（这是预期的），但是如果你点击“下一步”并且你打开了音频，你应该会听到一连串的哔哔声 - 这是第二个视频的预期音频。但是第一个之后没有视频。此外，如果你试图回到第一个，它也不起作用。

我在调试控制台中已经有了这个，并且customBinding的`update'方法中的视频对象看起来一切正常 - 它的源设置正确 - 但是这些方法似乎都不能让我显示视频。

我不确定这是否是我的淘汰赛绑定错误，或者我是否误解了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>

有什么想法吗？

Answer 1

我遇到了同样的问题。

如果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>

所以你的用户界面会更复杂......但是现在因为视频元素永远不会被删除所以它应该有效。

没有视频，但我得到声音 - knockout.js自定义绑定与video.js

1 个答案: