以性能为中心的 Youtube 视频嵌入 - jQuery embedVideo

以性能为中心的 Youtube 视频嵌入 - jQuery embedVideo

版本:

浏览量:224

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

embedVideo 是一个简单易用的 jQuery 插件,可帮助您通过延迟加载支持快速将 Youtube视频嵌入到您的网页中。

该插件在页面上获取/显示 Youtube 视频的预览图像,并在单击时加载/播放 iframe Youtube 视频。

完全响应和移动友好。非常适合视频密集型网络应用程序,以提高页面加载速度。

也可以看看:

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

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

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

如何使用它:

1.jquery.embedVideo.min.js在 jQuery 之后但在结束body标记之前加载脚本

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.embedVideo.js"></script>

2. 如果需要,加载 Youtube Iframe API。

<script src="https://www.youtube.com/iframe_api"></script>

3. 调用视频容器上的函数,我们就可以开始了。

<script src="https://www.youtube.com/iframe_api"></script>
$(document).ready(function(){
  $('.embed-youtube').embedVideo();
});

4.在data-id属性中指定视频ID

<div class="embed-youtube" data-id="ouv_isD5mZ8"></div>

5. 决定是否启用自动播放功能。

<div class="embed-youtube"
     data-id="ouv_isD5mZ8"
     data-autoplay="1">
</div>

6. 决定是否显示视频控件。

<div class="embed-youtube"
     data-id="ouv_isD5mZ8"
     data-controls="0">
</div>

7. 自定义替代封面图片。

<div class="embed-youtube"
     data-id="ouv_isD5mZ8"
     data-alternative-cover="bg.jpg">
</div>

8. 带有默认值的完整插件选项。

$('.embed-youtube').embedVideo({
   
  /**
   * default 120px * 90px
   * mqdefault 320px * 180px
   * hqdefault 480px * 360px
   * sddefault 640px * 480px
   * maxresdefault 1280px * 720px
   */
  sizePreview: '',
 
  /**
   * auto resizes the preview image
   */
  autoSizePreview: true,
 
  /**
   * alternative cover image
   */
  alternativeCover: false,
 
  /**
   *  custom play icon
   */
  imagePlayContainer: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428.41 301.36" height="50"><path d="M639.64,440.2l115.76-60-115.76-60.4Z" transform="translate(-469.68 -233.97)" fill="#fff"/><path d="M893.81,299s-4.19-29.53-17-42.53c-16.27-17.07-34.56-17.16-42.9-18.16C773.9,234,684,234,684,234h-.17s-89.92,0-149.9,4.32c-8.35,1-26.64,1.09-42.91,18.16-12.84,13-17,42.53-17,42.53a647.81,647.81,0,0,0-4.28,69.33v32.51A648.06,648.06,0,0,0,474,470.15s4.19,29.53,17,42.53c16.31,17.07,37.71,16.53,47.23,18.33,34.26,3.27,145.67,4.32,145.67,4.32s90-.13,150-4.49c8.38-1,26.63-1.09,42.9-18.16,12.84-13,17-42.53,17-42.53a649,649,0,0,0,4.28-69.33V368.31A647.81,647.81,0,0,0,893.81,299ZM639.64,440.2V319.82l115.76,60.4Z" transform="translate(-469.68 -233.97)" fill="#e52d27"/></svg>',
 
  /**
   * opacity
   */
  imagePlayOpacity: .85,
 
  /**
   * callback function
   */
  callback: function() {},
 
  /**
   *  playlist, search, or user_uploads
   */
  listType: '',
 
  /**
   * determines the content to be loaded into the player.
   */
  list: '',
 
  /**
   * enables autoplay
   */
  autoplay: 0,
 
  /**
   * setting the parameter's value to 1 causes closed captions to be shown by default, even if the user has turned captions off.
   */
  cc_load_policy: 0,
 
  /**
   * player color
   */
  color: 'red',
 
  /**
   * enables video controls
   */
  controls: 1,
 
  /**
   * disables keyboard interactions
   */
  disablekb: 0,
 
  /**
   * uses Youtube iFrame API
   */
  enablejsapi: 0,
 
  /**
   * end time
   */
  end: '',
 
  /**
   * shows fullscreen control
   */
  fs: 1,
 
  /**
   * specifies the language
   */
  hl: '',
 
  /**
   * setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. The default value is 1.
   */
  iv_load_policy: 1,
 
  /**
   * enables infinite loop
   */
  loop: 0,
 
  /**
   * hides the logo
   */
  modestbranding: 0,
 
  /**
   *  provides an extra security measure for the IFrame API and is only supported for IFrame embeds
   */
  origin: '',
 
  /**
   * a list of video IDs
   */
  playlist: '',
 
  /**
   *  controls whether videos play inline or fullscreen
   */
  playsinline: 0,
 
  /**
   * indicates whether the player should show related videos when playback of the initial video ends
   */
  rel: 1,
 
  /**
   * start time
   */
  start: 0
 
});

发表评论

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