以 MVVM 方式处理 html5 视频标签的正确方法是什么?

What is the proper way to handle html5 video tags in an MVVM manner?

本文关键字：方法 是什么 标签 方式 MVVM 处理 html5 视频      更新时间：2023-09-26

在我们基于 Durandal 的 SPA 中，我需要一个由我的视图模型严格控制的 html5 视频播放器。 视图模型将控制播放，搜索，时间显示，更改源等... 为此，我的视图模型需要直接引用 html 视频节点，以便它可以访问视频标签上的属性和函数。

现在最简单的方法是向我的视图添加一个空的视频标签，并使用 jquery 在我的视图模型的 compositionComplete() 函数中获取对它的引用。 但是，现在这已将我的视图模型与我的视图紧密耦合。

有没有办法让我在我的视图模型中创建 html 标记（通过 document.createElement('video')），将其设置为我的视图模型的属性，然后让 KNOCKOUT 将其添加到页面中？ 根据 knockoutjs 的文档，html: 数据绑定子句会将标记.ToString()到 innerHtml 属性，因此 javascript 不会直接引用页面上表示的同一视频标记。

以 MVVM 方式执行此操作的正确方法是什么，或者我最好的选择是使用 jquery 提取视频标签？

谢谢

Edit

在进一步查看挖空绑定之后，我认为最好的解决方案是为每个视频方法和属性创建自定义绑定：

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

sourcesArr 将是一个可观察的数组

体积将是一个可观察的整数

playbackState 将是一个具有"播放"或"暂停"值的可观察字符串

源语言

我认为（也许）您可以像这样创建一个视频视图模型和视频自定义绑定

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

跟进我对LostInComputer答案的评论：

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

用作：

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

现在myVideoElement()将为您提供视频的 DOM 元素。

相关文章：