Vimeo 视频灯箱答案

【问题标题】：Vimeo video lightboxVimeo 视频灯箱
【发布时间】：2015-04-21 20:39:40
【问题描述】：

我无法让Swipebox.js Vimeo 视频灯箱正常工作。我也试过 Shadowbox 没有任何运气。

实际叠加效果。视频只是没有显示。我尝试了不同的视频链接，使用文本链接而不是图像，并调整了插件的触发。

这是我尝试开始工作的实际页面（请参阅顶部的视频链接）： alookat.org/wavefront.

这是我的目标<a>：

<a class="swipebox-video" href="http://vimeo.com/124510802">
    <img id="video-preview" src="img/video-preview.jpg" alt="Wavefront Introduction Video">
    <span></span>
</a>

<span> 仅用于播放按钮。我已经尽可能地按照 Swipebox 页面上的说明进行操作。所有的 Javascript 和事件触发都应该到位。

任何帮助将不胜感激。我没有附加到 Swipebox——我将使用任何可以点击图像的东西来显示（和自动播放）Vimeo 视频。感谢您的帮助。

【问题讨论】：

在 Chrome 中，我得到Uncaught SyntaxError: Unexpected token }。在 Firefox 中，我得到SyntaxError: JSON.parse: expected ':' after property name in object at line 1 column 4 of the JSON data。
有趣的是，我 got your code to work 使用 Swipebox from cdnjs.com。但它 doesn't seem to work 带有来自 BrutalDesign's github 的 Swipebox。这些文件也是seem to be different，但具有相同的版本号。我不确定这表明了什么。
@showdev 我也注意到了这个错误。只是不确定修复是什么。感谢那。这真的很有用。我刚刚尝试使用该版本，但没有运气。我在控制台中收到以下错误：[Error] Failed to load resource: The requested URL was not found on this server. (124510802, line 0) file://player.vimeo.com/video/124510802?byline=0&portrait=0&color=cccccc&autoplay=false
奇怪。在您的代码中，您是否使用file:// 方案链接到视频？我的fiddle 可以在您的浏览器中使用吗？
@showdev 否，控制台在 URL 前添加了file://。是的，小提琴确实有效！只是当我将您的代码复制到我的代码时。可能是外部资源链接的问题？

标签： javascript jquery lightbox vimeo

【解决方案1】：

问题已解决：插件在实时托管时有效，但在本地托管时无效。更具体地说，Vimeo 视频仅在页面加载到服务器时加载。感谢@showdev 的帮助。

【讨论】：

【解决方案2】：

你为什么不使用这个代码：

<link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/docs/1a5967de5f298b3434c498858adf8a98146f9aaf/player.css" />
<div id="jquery-script-menu">
<a rel="nofollow" href="Javascript:" class="link-lightbox" data-videoid="YOUR VIDEO ID" data-videosite="vimeo"><img src="VIDEO IMAGE URL"/> OR YOUR CAN ADD SOME TEXT HERE WHICH WILL ACT AS TRIGGER TO OPEN LIGHT BOX</a><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/101Helper/docs/master/player.js"></script></div>

将YOUR VIDEO ID替换为您要在弹出式灯箱中播放的视频ID。

还有

替换 <img src="VIDEO IMAGE URL"/> 或您可以在此处添加一些将作为触发器打开灯箱的文本 用您的图像 URL 或一些文本设置触发器，单击该触发器将打开弹出灯盒子。

来源：http://www.the101helper.com/2016/10/jquery-on-click-pop-up-light-box-video.html

【讨论】：