动态视频标签和淘汰赛JS [英] Dynamic Video Tag and Knockout JS

问题描述

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

 < div data-bind =if：resource（）。encodingformats（）！='' > 
< video style =max-width：100％;控制> 
<！ -  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> 
  

如果绑定到确保每当当前资源发生变化时都会呈现一个全新的视频标签。

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

 < source>元素没有src属性。媒体资源加载失败。 
  

我在猜测源元素是得到渲染一秒钟没有 src 属性设置，这是导致它被炸？

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

---

编辑

我也应该提到使用Firebug来查看生成的html后，我应对了整个源标记到我的代码，并且工作正常。换句话说，我放弃了一分钟的淘汰赛的绑定，并复制在淘汰赛产生的HTML，一切工作。

这个问题最明显的是Firefox是非常挑剔如何生成源标签。

解决方案

事实证明，上面的真正问题是即使没有错误，Firefox也会触发错误事件。所以，如果你订阅这个事件，以便你可以回到IE8用户的flash播放器，一定要检查你的错误处理程序，以使

$ $ $ $ $ $ $ $ $（videoTag）.one（error，function（）{
/ /有时Firefox会触发这个事件，即使没有错误： - /
if（！this.error）return;


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

I'm trying to dynamically change the video source of a video tag using Knockout. This is the code:

<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>

I'm using an if binding to make sure that a brand new video tag is rendered whenever the current resource is changed.

This works in all browsers except Firefox. Firefox gives me an error (warning, actually) of

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

I'm guessing the source element is getting rendered for a split second without the src attribute set, which is causing it to bomb?

Is there an easy way to fix this? I suppose I could just bind the entire video's html, but that seems overly sloppy. Is there an easy way to get Firefox to work with the same code that otherwise works fine in IE9?

---

EDIT

I should also mention that after using Firebug to look at the html generated, I coped the entire source tags into my code, and that worked fine. In other words, I ditched the knockout bindings for a minute, and copied in the html that knockout was generating, and everything worked.

The problem most certainly is that Firefox is extremely picky about how the source tags are generated.

解决方案

It turns out the real problem above is that Firefox fires off the "error" event even when there's no error.

So, if you're subscribing to this event so that you can fall back to a flash player for IE8 users, be sure to check your "error" handler to make sure there's actually an error.

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

Once you do that, Firefox should happily let you bind the video tag's sources as I did above.

这篇关于动态视频标签和淘汰赛JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！