javascript - Javascript Vimeo 图库基础知识

Question

我正在使用 jQuery 为我的个人网站在 JS 中编写一个画廊部分。

http://www.playarmada.com/motion

对于上面的页面，我计划使用 JQuery 从缩略图中去除超链接，然后使用 javascript 将嵌入的视频 URL 重写为新视频。

我对 JS 很陌生，但不是编码。我希望它在单击拇指时加载新视频，而不加载新页面 - 除非 - js 被禁用，在这种情况下我希望它降级为超链接。

有没有更好的方法来做到这一点我应该知道或者我已经知道了？

Answer 1

为了使这更容易，您应该在页面 ids/classes 上提供一些相关的 HTML 元素。这使它们更容易通过引用。JavaScript。

为您的缩略图<a>元素添加一个类；让我们给他们一个类名video-thumbnail。此外，为<iframe>包含您的 Vimeo 视频的内​​容提供一个 ID；我们称它为“视频 iframe”。

缩略图：

<a class="video-thumbnail" href="http://www.playarmada.com/motion/orrery">
    <img class="gt_orrery" src="http://www.playarmada.com/images/thumbs/orrery.jpg">
</a>

框架：

<iframe id="video-iframe" src="http://player.vimeo.com/video/..."></iframe>

为了节省空间，我们可以将缩略图指向的视频 URI 直接存储在<a>标签中。

<a class="video-thumbnail" href="..." video-uri="http://player.vimeo.com/video/...">
   <img></img> 
</a>

设置好之后，我们就可以开始使用 jQuery 魔法了：

$(function() {
    // Add an event listener to the click event for each of your thumbnails
    $('.video-thumbnail').click(function(e) {

        // changes src of the iframe to the one we stored in the clicked thumbnail
        $('#video-iframe').get(0).src = this.getAttribute('video-uri');

        // stops default browser behaviour of loading a new page
        e.preventDefault(); 
    });
});

我们基本上为页面上所有缩略图的“点击”事件添加了一个事件监听器。在此事件侦听器中，我们获取存储在单击缩略图中的视频 uri，并告诉 iframe 加载 uri。我们调用e.preventDefault()以阻止浏览器转到原始链接。

如果 JavaScript 被禁用，缩略图将保留为常规链接。单击它们会导致用户转到带有视频的新页面的当前行为。