当前位置：文江博客话题详情

Javascript Vimeo 画廊基础知识

发布于 2024-12-02 14:22:49 字数 344 浏览 2 评论 0原文

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

http://www.playarmada.com/motion

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

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

有没有更好的方法可以做到这一点，我应该知道或者我已经掌握了？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

掩耳倾听 2024-12-09 14:22:49

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

向缩略图元素添加一个类；让我们给他们一个
类名视频缩略图。此外，提供包含您的
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：

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

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

<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 被禁用，缩略图将保留为常规链接。单击它们会导致当前行为，即用户转到包含视频的新页面。

To make this easier, you should give some of the relevant HTML elements on your page ids/classes. This makes them easier to reference via. JavaScript.

Add a class to your thumbnail <a> elements; let's give them a
class name video-thumbnail. Additionally, give the <iframe> containing your
Vimeo video an id; let's call it `video-iframe'.

Thumbnail:

<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:

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

To save space, we can store the video URI a thumbnail points to directly in the <a> tag.

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

Once this is set up, we can begin the jQuery magic:

$(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(); 
    });
});

We basically add an event listener for the 'click' event for all the thumbnails on the page. In this event listener, we get the video uri stored in the clicked thumbnail and tell the iframe to load the uri. We call e.preventDefault() to stop the browser from going to the original link.

If JavaScript is disabled, the thumbnails will stay as regular links. Clicking on them results in the current behaviour where the user goes to a new page with the video.

回复收藏 0 原文

~没有更多了~