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绑定与包含您的元素的字符串一起使用。这样可以确保永远不会有source个不包含src属性的代码。

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

动态视频标签和Knockout JS

2 个答案: