4

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

<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 对如何生成源标签非常挑剔。

4

2 回答 2

2

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

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

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

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

于 2013-01-18T19:45:03.997 回答
1

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

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

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

于 2013-01-18T17:51:33.817 回答