gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 17:48:15 25 4
gpt4 key购买 nike

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

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

我有什么方法可以在我的 View 模型中创建 html 标记(通过 document.createElement('video')),将其设置为我的 View 模型的属性,然后 knockout 将其添加到页面?根据 knockoutjs 的文档,html: 数据绑定(bind)子句会将 .ToString() 标记添加到 innerHtml 属性,从而将 javascript不会直接引用页面上显示的同一视频标签。

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

谢谢,

最佳答案

编辑

在进一步研究了 knockout 绑定(bind)之后,我认为最好的解决方案是为每个视频方法和属性创建自定义绑定(bind):

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

sourcesArr 将是一个可观察数组

volume 将是一个可观察的整数

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

原创

我认为(也许)您可以像这样创建视频 View 模型和视频自定义绑定(bind)

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

关于javascript - 以 MVVM 方式处理 html5 视频标签的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19660062/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com