Splide视频- Youtube视频在使用静态HTML时不会加载
Splide视频- Youtube视频在使用静态HTML时不会加载
提问于 2022-01-08 17:52:34
我有一个问题的分裂视频扩展，当我试图使用它与youtube，它不加载视频，只是显示一个黑色的屏幕，只要我点击播放。我从文档中复制了确切的例子，并把随机的小狗图片作为img，但它不起作用。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.4/dist/css/splide-extension-video.min.css">
<title>Splide Video</title>
</head>
<body>
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://cf.ltkcdn.net/dogs/images/orig/235430-2000x1332-australian-shepherd-puppy.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="https://www.rd.com/wp-content/uploads/2021/03/GettyImages-1133605325-scaled-e1617227898456.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.4/dist/js/splide-extension-video.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const splide = new Splide('.splide');
splide.mount(window.splide.Extensions);
});
</script>
</body>
</html>youtube视频不会加载，但Vimeo视频运行良好。我怎么才能修好它？
编辑:当服务这个文件时(Liveserver / Codepen / Webstorm视图)，而不仅仅是静态HTML，它看起来工作得很好。我不知道这是什么原因。
回答 1
Stack Overflow用户
发布于 2022-02-16 23:14:50
很奇怪，但我发现通过这个论点video: { loop: true, }会让它运行。如果没有它，它就不会
下面是一个有用的例子..。(此处代码：https://codepen.io/alxfmi/pen/poddQMB)
document.addEventListener("DOMContentLoaded", function() {
new Splide('.splide', {
heightRatio: 0.5625,
cover: true,
updateOnMove: true,
pagination: false,
padding: {
left: 0,
right: '22.5%'
},
arrows: true,
width: '100%',
wheel: true,
gap: '1rem',
video: {
loop: true,
},
}).mount(window.splide.Extensions);
});<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/css/splide.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.8/dist/css/splide-extension-video.min.css" rel="stylesheet" />
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://img.youtube.com/vi/cdz__ojQOuU/hqdefault.jpg">
</li>
<li class="splide__slide">
<img src="https://img.youtube.com/vi/3GNQL3alB-Y/hqdefault.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.8/dist/js/splide-extension-video.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70634942
复制相关文章
相似问题
腾讯云开发者
