jQuery 插件延迟加载 Youtube 视频直到需要 - LazyTube

jQuery 插件延迟加载 Youtube 视频直到需要 - LazyTube

版本:

浏览量:1214

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件git

推荐指数:

详细信息

另一个 jQuery Youtube视频延迟加载插件,它在网页上显示 Youtube 视频的缩略图,然后在点击时播放它们。 

也可以看看:

  • 用于延迟加载 Youtube 视频的轻量级 jQuery 插件 - 延迟加载器

  • 轻量级 jQuery Youtube 视频延迟加载插件 - LazyYT.js

如何使用它:

1. 首先,您需要在页面底部加载 jQuery 库和 jQuery LazyTube 插件。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.lazytube.js"></script>

2. 创建一个占位符元素并指定视频 ID 如下:

<div data-id="oX6I6vs1EFs" class="demo"></div>

3. 只需调用占位符上的函数即可。

$('.demo').lazyTube();

4.更多HTMLdata属性:

  • data-width="480": Youtube 播放器的宽度

  • data-height="320": Youtube 播放器的高度

  • 数据自动播放=“是”:自动播放

  • data-thumbnail="default":想要获取的缩略图大小:'mqdefault', 'hqdefault', 'sddefault', 'maxresdefault'

5. 该插件还通过覆盖 JavaScript 中的嵌入代码来支持其他视频服务和平台(如 Vimeo):

$('.demo').lazyTube({
  thumbnailCode: function(el, id, thumbnail) {
    return '<img src="https://i.vimeocdn.com/video/'+ el.data('thumbnail') +'.jpg" alt="" />';
  },
  embedCode: function(el, width, height, id, flags) {
    return '<iframe src="https://player.vimeo.com/video/'+ id +'?title=0&byline=0&portrait=0" width="'+ width +'" height="'+ height +'" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>'
  }
});

6. 使用“targetHandlers”在另一个元素中加载视频。在此示例中,视频将加载到Magnific Popup框中。

<div data-id="VIDEO ID" data-target="magnificPopup" class="demo"></div>
$('.demo').lazyTube({
  targetHandlers: {
    magnificPopup: function(options, params) {
      $.magnificPopup.open({
        items: [{
          src: 'https://www.youtube.com/watch/?v=' + params.id,
          type: 'iframe'
        }]
      });
    }
  }
});

变更日志:

2020-09-19

  • 添加了对其他服务的支持

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。