问在为图像设计的Javascript lightbox中播放MP4视频是不可能的吗？
EN

Stack Overflow用户

提问于 2014-03-28 07:25:34

回答 1查看 2.2K关注 0票数 0

我在Ubuntu Linux上使用Firefox进行测试。如果我将以下指向MP4文件的链接放在页面中，则该MP4文件将在浏览器窗口中播放，而不需要任何其他脚本或播放器：

<a href="/video/test.mp4" title="Test"><img src="/video/thumbnails/test.png" alt="" /></a>

然而，我希望能够停留在同一页上，并在弹出窗口中播放视频，而屏幕的其余部分变暗。我相信这种效果被称为“灯箱”。

考虑到我可以使用任何lightbox并将其留给浏览器来播放视频文件，我找到了一个用于实现lightbox效果的开源Javscript库，名为Lightbox2。它是轻巧而简单的。

按照说明，我将Javascript加载到网页的<head>中，然后将data-lightbox="image-1"添加到链接中：

<a href="/video/test.mp4" data-lightbox="image-1" title="Test"><img src="/video/thumbnails/test.png" alt="" /></a>

当我单击缩略图时，lightbox效果起作用，但视频不显示或播放。灯箱使屏幕变暗，并在中间显示一个白色方块，没有视频文件或播放器控件。

我知道有为播放视频而设计的Javascript lightbox特效，但是，既然浏览器无论如何都可以播放视频，那么这些Javascript库与我正在使用的有什么不同呢？

为什么我不能在这个简单的lightbox效果中播放视频？

是否可以修改它以播放视频，或者我需要将其报废并找到不同的库？对于类似的支持视频的库的建议是非常受欢迎的。

javascript

html

video

回答 1

Stack Overflow用户

发布于 2014-03-28 08:30:20

我真的很抱歉这么晚才回来。

好的，这就是我当时想到的一种方法。如果你想尝试一下，那就交给你了。但是，如果你想避免使用第三方脚本，你可能会在调整时遇到麻烦，这里有一个简单的方法。最好，我在这里使用jquery代码只是为了让它看起来更漂亮。

因此，假设您希望在单击链接时显示弹出的视频。为什么不让我们自己的div包含一个视频元素，然后将它隐藏起来，直到我们需要它。

.
.
.
<body>
<div id="vid-container" style="display:hidden;position:fixed; background: rgba(0,0,0,0.5);
 padding:40px; text-align:center;">
<video id="vid"/>
 </div>
</body>
.
.
.

所以，基本上我打算做的是，当一个人点击视频链接时，我们将使用一些jquery来切换弹出div。如您所见，在video标记中，我只指定了id。这只是因为我打算在通过javascript (和一些jquery)点击特定链接后设置视频src和编解码器。

假设我们有一个这样的链接：

<a href="Link_URL" class="vid-link" ><image src="img_URL" class="vid-img"/></a>

一个人点击它，这就是我认为你可以通过下面的脚本来处理它的方式。

<script>
$(window).load(function(){ 
// first of all I'm manually setting the pop's width and height to fit the entire screen
$("#vid-container").css("width",window.innerWidth+"px");
$("#vid-container").css("height",window.innerHeight+"px");
$(".vid-link").bind("click", function(){

// first get the video url from the link href

var vid_url= $(this).attr("href");

// now grab hold of the video and set it up by plugging in the video url

var video= document.getElementById("vid");
video.type="video/.mp4";
video.src="+vid_url+";
video.controls=true;
video.autoplay=false;

// now toggle the popup visible

$("vid-container").fadeToggle("slow");

});// end of click handler

});// end of window.load event
</script>