javascript - 没有视频，但我能听到声音 - knockout.js 与 video.js 的自定义绑定(bind)

Question

Codepen/jsfiddle

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

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

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

我不确定这是否是我在 knockout 绑定(bind)中做错了什么，或者我是否以某种方式误解了 video.js？

我的自定义绑定(bind)看起来像这样:

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 绑定(bind)删除了视频元素(即使是暂时的)，它也会破坏它们。

这是通过确保“with”和“if”绑定(bind)不适用于视频来解决的。

对于您的代码，这意味着:

<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 会更复杂......但现在视频元素永远不会被删除，它应该可以工作。