以MVVM方式處理html5視頻標簽的正確方法是什么？

Question

在基於Durandal的SPA中，我需要一個受視圖模型嚴格控制的html5視頻播放器。 視圖模型將控制回放，查找，時間顯示，更改源等。為此，我的視圖模型需要直接引用html視頻節點，以便它可以訪問視頻標簽上的屬性和功能。

現在最簡單的方法是在我的視圖中添加一個空的視頻標簽，並使用jquery在我的視圖模型的compositionComplete()函數中獲取對該視頻的引用。 但是，這現在使我的視圖模型與視圖緊密結合。

我有什么方法可以在視圖模型中創建html標簽（通過document.createElement('video') ），將其設置為視圖模型的屬性，然后將其添加到頁面中？ 根據基因敲除的文檔， html: data bind子句會將.ToString()標簽標記為innerHtml屬性，因此javascript無法直接引用頁面上表示的同一視頻標簽。

以MVVM方式執行此操作的正確方法是什么，或者我最好的選擇是僅使用jquery提取視頻標簽？

謝謝，

Answer 1

編輯

在進一步研究了剔除綁定之后，我認為最好的解決方案是為每個視頻方法和屬性創建自定義綁定：

<video data-bind='sources: sourcesArr, volume: videoVolume, playback: playbackState, ...'> </video>

sourcesArr將是一個可觀察的數組

體積將是一個可觀察的整數

playbackState將是一個具有'play'或'pause'值的可觀察字符串

原版的

我認為（也許）您可以像這樣創建視頻觀看模型和視頻自定義綁定

<video data-bind='video: videoViewModel'> </video>

Answer 2

我對LostInComputer答案的評論的后續行動：

ko.bindingHandlers.el={
  init: function(element, valueAccessor) {
    valueAccessor()(element);
  }
};

用於：

<video data-bind="el: myVideoElement, ..."></video>

現在， myVideoElement()將為您提供視頻的DOM元素。