1

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

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

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

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

提前感谢您的帮助！

4

3 回答 3

2

这是我找到的解决方案：我给您的唯一警告是将视频设置为 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/

于 2012-09-26T12:26:37.053 回答
0

对于希望使用 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/

于 2014-11-16T19:56:46.347 回答
-1

试试这个，很容易理解

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

于 2015-03-06T18:30:58.547 回答