8

つまり、これはブラウザのバグだと思います。それははるかに複雑なデザイン/サイトで登場しましたが、私はしっかりとしたフィドルを持っていて、コードやデザインなどを単純化し、次のことを発見しました：

Chromeにコントロール属性なしで埋め込む場合<video>、JavaScriptを使用して動画の再生をトリガーすると、動画要素が空白になります。

http://jsfiddle.net/trolleymusic/2fHTv/

空白は少しランダムですが、要素をロールアウトすると、再び表示されることがあります。他の何かをクリック/フォーカスする必要がある場合があります。ほとんどの場合、ビデオを一時停止すると、ビデオが再表示されます。

play()また、クリックに基づくだけでなく、経由で呼び出されたときにも発生することを示すために、そこに（コメントアウトされた）行を配置しましたsetTimeout。

とにかく、遊びをして、あなたの考えを教えてください。

ありがとう！

ウェイン

controls（Ooo-そして他のビデオは、属性を除いて同一である別の要素が正常に機能することを示すためにあります

4

3 に答える 3

11

将来誰かがそれを必要とする場合に備えて、私は自分の質問に答えたほうがいいかもしれません。

これはバグであり、Chrome19では正常に機能します。

この場合の私の回避策は、コントロール属性があるかどうかを確認することでした。追加しない場合は、ビデオを再生してからコントロール属性を削除してください。

それをチェックしてください：http：//jsfiddle.net/trolleymusic/vhgss/

playVideo = function(el) {
    if (!el) { return; }
    if (el.getAttribute('controls') !== 'true') {
        el.setAttribute('controls', 'true');                    
    }
    el.paused ? el.play() : el.pause();
    el.removeAttribute('controls');
}
于 2012-03-05T21:31:49.473 に答える
1

これはバグのようです。自動再生タグを追加する代わりに、すべてのビデオに対して$（document）.readyのplayメソッドを手動でくすぐることで、これを回避しました。

('#videoId').get(0).play()
于 2013-05-22T19:25:12.060 に答える
1

このバグをChromiumプロジェクトに報告しました。それまでの間、回避策（Chrome 30に引き続き存在）として、ページ上のすべての動画要素にコントロールを追加しましたが、animationページ上のイベント（スクロールの深さなど）によって間接的にトリガーされるものに呼び出されるクラスを適用しました。ユーザーが直接。

<video class="animation" preload controls>

.animations次に、 jQueryの使用からコントロールを削除しました。

$( document ).ready(function() {
  $('video.animation').removeAttr('controls');
});

これにより、リグレッションの修正を待っている間に問題が解決します。

于 2013-10-25T22:07:09.917 に答える