Question

好的，我已经按照HTML5视频标签嵌入视频的好教程，可以找到here。基本上这个想法是，在悬停视频播放时，在悬停时停止播放。

好吧，我一直试图在一个页面上包含多个视频（所有相同的视频，请注意），希望我能创建一种互动的多平铺电路板。换句话说，您将鼠标悬停在每个视频上，它会根据您最终的每个视频中的位置创建不同的图像等。

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

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

提前感谢您的帮助！

Answer 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/

Answer 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个视频的页面，并且每次只播放悬停的视频，而每个视频都会在鼠标离开的当前帧上暂停。

以下是其中的一个示例：http://jsfiddle.net/cc7w0pda/

Answer 3

试试这个，它很容易理解

＆＃13;

<!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>

＆＃13;

HTML5多视频显示 - 将鼠标悬停在播放状态

3 个答案: