没有视频，但我有声音 - 敲除.js带有视频.js的自定义绑定

Question

Codepen/jsfiddle

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

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

我在调试控制台中遇到了这个问题，并且 customBinding 的"update"方法中的视频对象似乎一切正常 - 它的源设置正确 - 但似乎没有一种方法能够让我显示视频。

我

不确定这是否是我在挖空绑定方面做错了什么，或者我是否误解了视频.js不知何故？

我的自定义绑定如下所示：

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>

所以你的UI会更复杂...但是现在，由于视频元素永远不会被删除，因此它应该可以工作。