0

マウスオーバーで再生するHTML5ビデオを取得しようとしています。FirefoxとSafariで正常に動作し、Chromeでホバーするとビデオが空白になり、ページ上の別の要素にホバーした後にのみ表示されます。

これはサイトです：www.manart.de

これはコードです：

    <div id="wrapper">
    <video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
    <source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
    <source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
    </video>    
    </div><!--end wrapper-->

    <script src="fileadmin/js.js"></script>

そしてこれはjsです：

    document.addEventListener('mouseover',hoverVideo,false);
    var vid = document.getElementById('video-example');
    function hoverVideo(e)
    {   
    if(e.target == vid)
    {
    vid.play();
    this.addEventListener('mouseout',hideVideo,false);
    }

    }

助けてくれてありがとう!!!!

4

1 に答える 1

2

それは少し奇妙ですが、ポスターフレームを削除すると（hideVideo例外がスローされないようにメソッドが定義されていることも確認しました）、機能します（fiddle）。

ポスターフレームにaのJPG代わりに使用してみたところ、同じ結果になりました（フィドル）。また、ビデオを音声付きのものに置き換えると、ビデオが再生されていることは明らかですが、見えません（フィドル）。PNG

私にはChromeのバグのように見えますが、検索したときにGoogleはあまりスローしませんでした（おそらく私の用語が間違っていました）。

したがって、簡単な解決策は、おそらくポスターフレームを削除することです。これは、Chromeがロードされたときにビデオの最初のフレームを表示するため、とにかく探しているものにかなり近いものです。

アップデート：

または、再生を開始する前にプレーヤーにコントロールを動的に追加し、すぐに再度削除するという同様の問題について、このスレッドで詳しく説明されているハックを使用することもできます（フィドル）。作成者は、Chrome 19で発生しないことを確認することにより、この問題をChromeのバグとして確認しました。

HTML：

<div id="wrapper">
    <video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
      <source id='mp4'
        src="http://www.manart.de/fileadmin/schiffchen.mp4"
        type='video/mp4'>
      <source id='ogv'
        src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
        type='video/ogg'>
    </video>    
</div>

JavaScript： 

var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);

function hoverVideo(e) {   
    if (vid.getAttribute('controls') != 'true') {
        vid.setAttribute('controls', 'true');                    
    }
    vid.play();
    vid.removeAttribute('controls');
    vid.addEventListener('mouseout',hideVideo,false);
}

function hideVideo(e) {
    // do whatever you were going to do here, but omitting
    // the method completely causes an exception
    //vid.pause();   

    // clean up the listener when finished
    vid.removeEventListener('mouseout', hideVideo);
}
于 2012-08-10T22:45:08.030 に答える