HTML5 多视频显示 - 悬停播放答案

【问题标题】：HTML5 Multiple Video Display - Hover Over to PlayHTML5 多视频显示 - 悬停播放
【发布时间】：2012-02-16 19:14:33
【问题描述】：

好的，我遵循了一个关于通过 HTML5 视频标签嵌入视频的好教程，可以在 here 找到。基本上，这个想法是在悬停时播放视频，在悬停时停止播放。

嗯，我一直在尝试在一个页面上包含多个视频（请注意，所有视频都是相同的），希望我可以创建一种交互式多瓷砖板。换句话说，您将鼠标悬停在每个视频上，它会根据您最终在每个视频中的位置创建不同的图像，等等。

无论如何，我要问的问题是：根据我遵循的本教程，创建多个平铺视频的最佳方法是什么？我将粘贴我一直在使用的代码。我遇到的问题是，如果我创建多个 javascript 函数，它只会显示我创建的最后一个函数的视频，而不是所有视频。

我希望这是有道理的。 Here 是我迄今为止所做工作的链接。注意：视频需要一段时间才能加载，因此在此之前它会播放声音但不播放图像。

提前感谢您的帮助！

【问题讨论】：

标签： html video hover ogg

【解决方案1】：

这是我找到的解决方案：我给您的唯一警告是将视频设置为 preload="none" 因为如果它们全部加载，它将成为您带宽的噩梦。我不得不更换我的，现在我正在寻找一种解决方案，让人们知道视频正在加载。

var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{   
    this.play();
}
function hideVideo(e)
{
    this.pause();
}

这是我得到答案的地方：http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

【讨论】：

【解决方案2】：

对于希望使用 jQuery 实现此目的的任何人，这里有一个我用于动态加载内容的解决方案：

        //play video on hover
        $(document).on('mouseover', 'video', function() { 
            $(this).get(0).play(); 
        }); 

        //pause video on mouse leave
        $(document).on('mouseleave', 'video', function() { 
            $(this).get(0).pause(); 
        });

这可以用于包含 1 - N 个视频的页面，并且每次只会播放悬停的视频，而每个视频都会在 mouseleave 的当前帧上暂停。

这是一个实际应用的例子：http://jsfiddle.net/cc7w0pda/

【讨论】：

【解决方案3】：

试试这个，很容易理解

<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>

【讨论】：