Splidejs视频未显示

编程问答 2022-07-13

问题描述

我正在使用splidejs将视频加载到幻灯片中。正在加载视频扩展名，但是未渲染任何视频。我已经看完了，可以看到代码的任何问题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@latest/dist/css/splide-extension-video.min.css">
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide@2.4.14/dist/js/splide.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.4.6/dist/js/splide-extension-video.min.js"></script>

<div id="primary-slider" 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"></li>
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"></li>
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"></li>
       </ul>
   </div>
</div>

<script>
document.addEventListener( 'DOMContentLoaded',function () {
    var splide = new Splide( '#primary-slider',{
        video: {
            autoplay: true,mute    : true,},});
    splide.mount();
}); 
</script>

解决方法

在完全加载并解析了初始HTML文档之后，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。

vs

加载整个页面（包括样式表和图像等所有相关资源）后，将触发load事件。这与DOMContentLoaded相反，后者在页面DOM被加载后立即触发，而无需等待资源完成加载。

您应该使用load事件监听器

document.addEventListener( 'load',function () {
    var splide = new Splide( '#primary-slider',{
        video: {
            autoplay: true,mute    : true,},});
    splide.mount();
});
,

您只需要更改一行即可使其正常工作：

splide.mount();

到

splide.mount({Video});

或

splide.mount(window.splide.Extensions);

这取决于您包含 Splide CSS/JS 文件的方式。

更多：https://splidejs.com/extension-video/

javascriptsliderslidervideovideo