动态视频标签和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绑定来确保每当当前资源被更改时都会渲染全新的视频标签。

这在除Firefox以外的所有浏览器中都有效。 Firefox会给我一个错误（实际上是警告）：

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

我猜测source元素在没有设置src属性的情况下被渲染了一瞬间，这导致它崩溃了？有没有简单的方法来解决这个问题？我想我可以绑定整个视频的html，但这似乎太松散了。有没有简单的办法让Firefox与IE9使用相同的代码正常工作？

---

编辑

我还应该提到，在使用Firebug查看生成的html后，我将整个source标签复制到我的代码中，这很好用。换句话说，我放弃了knockout绑定了一分钟，复制了knockout正在生成的html，并且一切都正常工作。问题肯定是Firefox对如何生成源标记非常挑剔。

- Adam Rackis

Answer 1

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

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

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

一旦您完成这一步骤，Firefox就会愉快地让您像我上面所做的那样绑定视频标签的资源。

- Adam Rackis

---

很高兴你找到了真正的问题。 - RP Niemeyer

Answer 2

看起来应该类似于这个：使用 Knockout.js 控制 Flash 插件，冲突的 jQuery.tmpl 和 Knockout-Sortable。

虽然不太优雅，但最简单的解决方案是使用带有包含您的元素的字符串的 html 绑定。这确保了永远不会有一个没有包括 src 属性的 source 标签。

更好的选择可能是创建一个自定义绑定，接受一个 resource，创建一个包含所有 "source" 标签的字符串，然后将 html 绑定应用于容器元素（或使用类似 jQuery 的东西来附加元素）。这将是一种更优雅的解决方案。可能需要生成整个 video 标记，不确定火狐对此有多挑剔。

- RP Niemeyer

---

好的，这正是我所期望的。谢谢你的回答，Ryan。那么，我期望FF至少在这里和IE一样好，这是错的吗？ :-/ - Adam Rackis

至少使用自定义绑定可以使标记看起来更干净，并且避免在视图模型中构建HTML。 - RP Niemeyer

谢谢你的时间，Ryan，但请看下面我的答案，了解真正的问题所在。我很想参加那个开发会议... - Adam Rackis