3

コードペン/ jsfiddle

次/前のボタンを使用して一連のビデオを循環するアプリがあります。UI を制御するために knockout.js を使用しているので、単一のビデオ タグを初期化するカスタム バインディングを作成し、ノックアウトが次のビデオに移動すると、src オブジェクトの配列を保持するオブザーバブルを更新します{src:"", type:""}。

ここに問題のコードペンがあります。ここで、最初の動画には音声がありません (これは想定内です) が、[次へ] をクリックして音声をオンにすると、2 番目の動画で予想される音声である一連のビープ音が聞こえるはずです。しかし、最初のものの後にビデオはありません。また、最初のものに戻ろうとしても機能しません。

デバッグ コンソールでこれを確認しましたが、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>

何か案は？

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>

したがって、UI はより複雑になりますが、ビデオ要素が削除されないため、機能するはずです。

于 2013-11-26T22:39:46.133 に答える