动态视频标签和淘汰赛 JS

Question

我正在尝试使用 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 对源标签的生成方式非常挑剔。

Answer 1

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

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

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

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

Answer 2

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

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

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