javascript - 动态视频标签和 Knockout 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 绑定(bind)来确保每当当前资源发生更改时呈现全新的视频标签。

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

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

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

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

---

编辑

我还应该提到，在使用 Firebug 查看生成的 html 之后，我将整个 source 标记复制到我的代码中，并且效果很好。换句话说，我暂时放弃了 knockout 绑定(bind)，并复制了 knockout 生成的 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 应该很乐意让你像我上面那样绑定(bind)视频标签的源。