详细信息
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
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。