1

ページに html5 ビデオ タグがあり、IE8 のフラッシュ フォールバックがあります。ビデオは display:none で非表示になり、再生ボタン (画像) が押されるまで親 'a' にアタッチされます。その時点で、ビデオ要素は親 'b' (オーバーレイ内のボックス) に移動され、jQuery の show() を呼び出します。

Chrome、FF、および Safari では、ビデオが表示されます。ただし、IE9 および IE8 では、ビデオは表示されませんが、表示されます。つまり、あるべき場所で右クリックすると、ビデオ関連のコンテキスト メニューが表示されます。その時点で再生をクリックすると、ビデオが表示され、定期的に再生されます。

ビデオを表示するもう 1 つの方法は、ビデオ要素の css の一部を変更することです。たとえば、box-sizing をそのまま (border-box) から content-box に変更すると、ビデオが表示され、その逆も同様です。

そのコンソールからそれをしようとするとうまくいきます。一方、スクリプト内でそれを実行しようとしてもうまくいきません。

video 要素とそれが継承するものの css は次のとおりです。

*, html > * { box-sizing: border-box; }
audio, canvas, video { display: inline-block; }
.center { text-align: center; }
#section1 #videobox .videoPlayer { cursor: pointer; }

#video {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 10003;
}

これは奇妙なレイアウトの問題である可能性があると思います（hasLayoutと言うでしょうが、ありがたいことにIE6/7を扱っていません）。

更新 jsfiddle 内で問題を再現できました: http://jsfiddle.net/e76x5/5/

4

1 に答える 1

0

同様の問題があり、それを修正するためにできることは、ビデオの高さの css 宣言を削除し、表示後に javascript を使用して設定することだけでした。キャッシュをクリアした後にのみ表示されるIE9 HTML5ビデオを確認できます

于 2013-04-08T15:32:25.267 に答える