是否无法在为图像设计的 Javascript 灯箱中播放 MP4 视频？答案

【问题标题】：Is it not possible to play an MP4 video in a Javascript lightbox designed for images?是否无法在为图像设计的 Javascript 灯箱中播放 MP4 视频？
【发布时间】：2014-03-28 07:25:34
【问题描述】：

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

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

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

想到我可以使用任何灯箱并将其留给浏览器播放视频文件，我找到了一个用于制作灯箱效果的开源 Javscript 库，名为 Lightbox2。它轻巧简单。

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

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

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

我知道有为播放视频而设计的 Javascript 灯箱效果，但是，既然浏览器无论如何都可以播放视频，那么这些 Javascript 库与我使用的库有什么区别？

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

可以修改它以播放视频，还是我需要废弃它并找到其他库？非常欢迎推荐类似的视频库。

【问题讨论】：

标签： javascript html video

【解决方案1】：

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

好的，这只是我当时想到的一种方法。如果你想试试这个，就留给你。但是，如果您想避免使用可能难以调整的第三方脚本，这里有一个简单的方法。最好，我将在这里使用 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。如您所见，在视频标签中我只指定了 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>

我认为这应该可以解决您的需求。你可以用它做更多的事情。

希望这会有所帮助:)

HTML5 万岁！

【讨论】：

感谢您的回复，但视频在灯箱框架中弹出是 100% 必要的，这就是我尝试这样做的原因。此外，jwplayer 对于商业用途来说非常昂贵，这最终是我使用它的目的。我并不是说我不会为一个像样的 Javascript 库支付任何费用，但 jwplayer 无法控制它所提供的定价。
嗯，我明白了。好吧，我可以看到解决此问题的两种方法：首先，我可以看到您实际上根本没有使用视频标签，所以这可能就是您的视频从未出现在灯箱中的原因。给我几个小时，我会发回一个非常简单的解决方案。（对不起，我现在出差了，呵呵）