动态视频标签和淘汰赛 JS

Posted 2023-05-08

【中文标题】动态视频标签和淘汰赛 JS

【英文标题】：Dynamic Video Tag and Knockout JS

【发布时间】：2013-01-02 11:38:00

【问题描述】：

我正在尝试使用 Knockout 动态更改 video 标记的视频源。这是代码：

<div data-bind="if: resource().encodingformats() != ''">
    <video style="max-width: 100%;" controls>
        <!-- ko with: resource() -->
        <source data-bind="attr: src: webmUrl " type='video/webm; codecs="vp8, vorbis"'>
        <source data-bind="attr: src: oggUrl " type='video/ogg; codecs="theora, vorbis"'>
        <source data-bind="attr: src: mp4Url " type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <!-- /ko -->
    </video>
</div>

我正在使用if 绑定来确保在当前资源更改时呈现全新的视频标签。

这适用于除 Firefox 之外的所有浏览器。 Firefox 给了我一个错误（实际上是警告）

<source> element has no "src" attribute. Media resource load failed.

我猜source 元素会在没有设置src 属性集的情况下被渲染一瞬间，这会导致它爆炸？

有没有简单的方法来解决这个问题？我想我可以绑定整个视频的 html，但这似乎过于草率。有没有一种简单的方法可以让 Firefox 使用在 IE9 中正常工作的相同代码？

---

编辑

我还应该提到，在使用 Firebug 查看生成的 html 之后，我将整个 source 标记处理到我的代码中，并且效果很好。换句话说，我放弃了淘汰赛绑定一分钟，并复制了淘汰赛正在生成的 html，一切正常。

毫无疑问，问题在于 Firefox 对源标签的生成方式非常挑剔。

【参考方案1】：

事实证明，上述真正的问题是即使没有错误，Firefox 也会触发“错误”事件。

因此，如果您订阅此事件以便可以为 IE8 用户回退到 Flash 播放器，请务必检查您的“错误”处理程序以确保确实存在错误。

$(videoTag).one("error", function()
    //sometimes Firefox fires this event even though there's no error :-/
    if (!this.error) return;

一旦你这样做了，Firefox 应该很乐意让你绑定视频标签的源，就像我在上面所做的那样。

【讨论】：

很高兴您发现了真正的问题。

【参考方案2】：

似乎与此类似：Controlling Flash Plugins with Knockout.js, Conflicting jQuery.tmpl and Knockout-Sortable。

不是很优雅，但最简单的解决方案是将html 绑定与包含您的元素的字符串一起使用。这确保了永远不会有不包含src 属性的source 标记。

更好的选择可能是创建一个接受resource 的自定义绑定，创建一个包含所有“源”标签的字符串，然后将html 绑定应用于容器元素（或使用某些东西像 jQuery 一样追加元素）。那将是一个更优雅的解决方案。可能需要生成整个video标签，不知道FF对它有多挑剔。

【讨论】：

好吧，这就是我所期待的。谢谢瑞恩的回答。所以我期望 FF 至少和 IE 一样好，这对我来说是错误的吗？ :-/

好吧，至少一个自定义绑定可以让它在标记中看起来很干净，并且让您免于在视图模型中构建 HTML。

感谢您抽出宝贵时间 Ryan，但请查看下面的答案，了解真正的问题所在。我很想参加那个开发会议......