6

次の属性を持つビデオタグがあります。 

 <video width="xx" height="xx" poster="image.jpg" preload="auto">

ポスター画像を表示する必要があり、ビデオをプリロードする必要があります。
ブラウザのコントロールは表示しませんが、カスタム コントロール (CSS と Javascript) を使用してビデオを手動で制御します。クリックするとビデオが始まるはずです。

Firefox では、これは意図したとおりに機能します。ポスター画像をクリックすると、ビデオが開始されます。ビデオをクリックすると、ビデオが停止します。

現在の webkit ブラウザー (Safari 6.0.2、Chrome 23.0.1271.64) では、これは機能しません。
ポスター画像をクリックするとすぐにビデオが見えなくなり、空白の (白い) ボックスが残ります。音は聞こえますが、映像は見えます。そのボックスをクリックすると、音が止まります。

ポスター画像を設定するかpreload="none" そのままにしておくと、webkit-browsers で再び機能します。

これに対する既知の回避策はありますか?

4

2 に答える 2

4

同様の問題がありました。今は Safari では問題ないようですが、Chrome 27 ではまだ動作が不安定です。これは私が使用している解決策です (この質問に対する受け入れられた回答から借用:コントロールを使用していない場合、ビデオ要素が Chrome で消える)。

JS

$(document).ready(function(){
    $("#video").on('play',function(){
        if (this.getAttribute('controls') !== 'true') {
            this.setAttribute('controls', 'true');                    
        }
        this.removeAttribute('controls');
    });
});

HTML

<video id="video" preload="auto" loop="loop" autoplay="autoplay" poster="picture.png">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    Your browser sucks.
</video>

「picture.png」はポスター画像、「video.mp4」と「video.webm」は動画です。

ここに動作する js フィドルがあります: http://jsfiddle.net/2n5Yj/1/

于 2013-06-20T14:16:01.023 に答える