Question

我目前正在一个网站中，其中 Youtube视频的播放器尺寸小于150x150，这是iDangero.us Swiper内部的jquery swiper插件......

我尝试过应用自定义尺寸，如下所示： -

Youtube player

但是它在Firefox中显示的问题显示黑盒子并显示错误是控制台： -

我的演示： -

My demo

错误： -

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 1 [nsIDOMEventTarget.removeEventListener]

我在Chrome上测试过它显示的很好......

我正在使用此代码： -

<div class="swiper-container swiper-vid">
                            <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 1</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 2</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 3</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 4</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 5</p>
                                </div>
                              </div> 
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 6</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 7</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 8</p> 
                                </div>
                              </div>
                            </div>
                          </div>

Js使用： -

swiperVid = $('.swiper-vid').swiper({
        slidesPerSlide : 3,
        calculateHeight:true
    });

解决方案是什么？我错了吗...

Answer 1

使用CSS3转换的idangerous Swiper可以防止显示youtube视频的控件，也可以阻止它的全屏选项。

在backface-visibility上设置.swiper-container属性会阻止全屏显示 .swiper-wrapper类上的transform3d CSS会阻止youtube的控件，并会出现许多其他问题，例如黑屏，没有视频的音频播放等等。

所以我认为如果你想让youtube视频正常播放，你应该考虑更改idangerous Swiper。

Answer 2

试试这个：

将?html5=1添加到您的嵌入链接
将useCSS3Transforms: false添加到swiper属性。

像魅力一样工作：）

Answer 3

您是否尝试在src属性中输入完整的网址而不仅仅是/ file name？试一试，如果有帮助，请告诉我。

<强>更新

尝试在构建swiper的函数上将useCSS3Transforms选项更改为false，我也遇到了这个问题并修复了它。不知何故，它也会导致YouTube iframe在iOS上中断。

Answer 4

禁用css3过渡对我来说还不够。我在swiper幻灯片中通过ooyla传送了一个html5视频。

我必须关闭css3transitions并禁用循环才能正确加载我的视频。

$('.swiper-container').swiper({
    mode:'horizontal',
    useCSS3Transforms: false,
    loop: false
});

我的视频现在播放了！

较小尺寸Youtube视频无法在Swiper内部工作

4 个答案: