使用灯箱打开本地视频

Question

最终我的目标是让一个小视频在我的网站上静音播放，然后当用户将鼠标悬停在它上面时，它会在灯箱中打开并播放声音。悬停功能我会在之后使用，但现在我似乎无法让本地视频（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>

灯箱下载自 https://html5box.com/html5lightbox/ and installation instructions followed from https://html5box.com/html5lightbox/index.php#quickinstallation

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

Answer 1

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

不幸的是，data-mp4 仍然不适用于 mp4，但 webm 现在可以

使用灯箱打开本地视频

Open Local Video Using Lightbox

jquery

html

video

fancybox

lightbox