懸停HTML5播放器在Chrome

我試圖得到一個HTML 5視頻在鼠標懸停時播放不起作用。它工作正常在Firefox和Safari只是在鍍鉻視頻空白，當我徘徊，併成爲唯一後我將鼠標懸停在頁面上的其他元素上可見....懸停HTML5播放器在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); 
    } 

    }

感謝您的幫助!!!!

來源

2012-08-10 Benedikt

這有點奇怪，但如果您刪除海報幀（我也確保hideVideo方法被定義爲避免拋出異常），它的工作原理（fiddle）。

我嘗試使用JPG而不是PNG作爲具有相同結果的招貼畫框（fiddle）。當你替換您的視頻爲一個有聲，這是顯而易見的是，在播放視頻時，但是，它是無形的（fiddle）。

看起來像在Chrome給我一個錯誤，但是當我搜索（也許我的條件是錯誤的），谷歌並沒有把太多了。

速戰速決，因此，可能是簡單地刪除該張貼框其中，因爲Chrome瀏覽器將顯示，當它加載視頻的第一幀，可能是非常接近你在找什麼呢。

更新：

或者，您可以使用此thread on a similar issue涉及動態地將控件添加到開始播放前播放器，並立即（fiddle）再次消除他們詳細介紹了黑客攻擊。

<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); 
}

筆者已經通過驗證，它不會在Chrome 19

HTML發生證實了問題，因爲在瀏覽器的錯誤

來源

2012-08-10 22:45:08

懸停HTML5播放器在Chrome

回答

相關問題