4

videoKnockout を使用して、タグのビデオ ソースを動的に変更しようとしています。これはコードです：

<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 全体をバインドすることもできると思いますが、それはあまりにもずさんなようです。IE9 で正常に動作するのと同じコードで Firefox を動作させる簡単な方法はありますか?

編集

また、Firebug を使用して生成された html を確認した後、sourceタグ全体をコードに挿入したところ、問題なく動作しました。言い換えれば、ノックアウト バインディングを 1 分間捨てて、ノックアウトが生成していた html にコピーしたところ、すべてが機能しました。

最も確実な問題は、Firefox がソース タグの生成方法に非常にうるさいことです。

4

2 に答える 2

2

上記の本当の問題は、エラーがない場合でも Firefox が「エラー」イベントを発生させることであることがわかりました。

そのため、IE8 ユーザー用の Flash Player にフォールバックできるようにこのイベントをサブスクライブしている場合は、「エラー」ハンドラーをチェックして、実際にエラーがあることを確認してください。

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

これは次のようになります：Knockout.jsを使用したFlashプラグインの制御、jQuery.tmplとKnockout-Sortableの競合。

あまりエレガントではありませんが、最も簡単な解決策はhtml、要素を含む文字列でバインディングを使用することです。これにより、属性sourceを含まないタグが存在しないことが保証されます。src

resourceより良い選択は、を取り込んですべての「ソース」タグを含む文字列を作成し、そのhtmlバインディングをコンテナ要素に適用する（またはjQueryのようなものを使用して要素を追加する）カスタムバインディングを作成することです。それはよりエレガントな解決策になるでしょう。タグ全体を生成する必要があるかもしれvideoませんが、FFがどれほどうるさいのかわからない場合があります。

于 2013-01-18T17:51:33.817 に答える