Question

我正试图在鼠标悬停时播放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);
    }

    }

感谢您的帮助!!!!

Answer 1

这有点奇怪，但是如果你删除了海报框（我也确保定义了hideVideo方法以避免抛出异常）它可以工作（fiddle）。

我尝试使用JPG而不是PNG作为海报框，但结果相同（fiddle）。当你用视频替换你的视频时，很明显视频正在播放，但它是不可见的（fiddle）。

对我来说，Chrome看起来像是一个错误，但是当我搜索时谷歌并没有引起太大的反响（也许我的用语错了）。

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

<强>更新

或者，您可以使用此thread on a similar issue中详述的黑客攻击，其中包括在播放开始之前向播放器动态添加控件并立即再次删除它们（fiddle）。作者通过验证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);
}

悬停html5播放器无法使用chrome

1 个答案: