使用灯箱打开本地视频答案

【问题标题】：Open Local Video Using Lightbox使用灯箱打开本地视频
【发布时间】：2016-08-14 00:30:01
【问题描述】：

最终我的目标是在我的网站上静音播放一段小视频，然后当用户将鼠标悬停在它上面时，它会在灯箱中打开并播放声音。我将使用悬停功能，但现在我似乎无法让本地视频（mp4 和 webm）在灯箱中播放。我尝试过 FancyBox 和 LightBox，最接近工作的是（非常简单的 html 页面）；

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    
    <script type="text/javascript" src="froogaloop2.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="html5lightbox.js"></script>
</head>

<body>
    
    <a href="websiteintro.mp4" class="html5lightbox" title="web">IMage</a>
    <a href="websiteintro.webm" class="html5lightbox" title="web">image mp4</a>



</body>
</html>

Lightbox 是从 https://html5box.com/html5lightbox/ 下载的，安装说明是从 https://html5box.com/html5lightbox/index.php#quickinstallation 获得的

点击链接后，灯箱打开，但没有播放任何内容，它只是一个灰色背景。我的视频与 html 页面位于同一文件夹中，因此没有文件路径，所以这不应该是问题。我在想我可能需要使用某个类，因为它是一个视频，但我在任何地方都找不到解决方案。这可能是一个非常简单的解决方法，我只是找不到它，请帮助！

【问题讨论】：

标签： jquery html video fancybox lightbox

【解决方案1】：

找到了答案 - 我完全忘记了检查元素。以防万一其他人在开发网站时偶然发现这一点，它就像我想的那样简单……无论如何，对于 webm 文件来说也是如此。我实际上只是将一行更改为<a href="websiteintro.webm" data-webm="websiteintro.webm" class="html5lightbox" title="web">image mp4</a>

不幸的是，data-mp4 仍然不适用于 mp4，但 webm 暂时可以使用

【讨论】：