0

我正在尝试在鼠标悬停时播放 html 5 视频。它在 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定义了该方法以避免引发异常），它就可以工作（小提琴）。

我尝试使用 aJPG而不是 aPNG作为具有相同结果的海报框架（小提琴）。当您用声音替换视频时，很明显视频正在播放，但它是不可见的（小提琴）。

对我来说看起来像是 Chrome 中的一个错误，但当我搜索时谷歌并没有抛出太多问题（也许我的术语是错误的）。

因此，快速修复可能是简单地删除海报框架，因为 Chrome 会在加载后显示视频的第一帧，无论如何可能非常接近您正在寻找的内容。

更新：

或者，您可以在类似问题上使用此线程中详述的 hack，该问题涉及在播放开始之前向播放器动态添加控件并立即再次删除它们（小提琴）。作者通过验证 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 回答