5

我目前正在一个网站上工作，其中Youtube 视频的播放器大小小于 150x150，它位于iDangero.us Swiper内，它是 jquery swiper 插件...

我已经尝试应用自定义尺寸如下： -

优酷播放器

但它在 Firefox 中与播放器产生问题，它显示黑框并显示错误是控制台：-

我的演示：-

我的演示

错误：-

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
    });

解决方案将是什么？我是不是在哪里弄错了...

4

4 回答 4

2

使用 CSS3 转换的危险 Swiper 会阻止显示 youtube 视频的控件，并阻止它的全屏选项。

将backface-visibility属性设置为 on.swiper-container将阻止全屏 transform3d CSS on .swiper-wrapperclass 阻止 youtube 的控制并产生许多其他问题，如黑屏、没有视频的音频播放等......

因此，如果您希望 youtube 视频正常播放，我认为您应该考虑更改危险的 Swiper。

于 2013-10-30T21:33:35.113 回答
1

试试这个：

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

奇迹般有效 ：）

于 2014-02-21T22:49:46.750 回答
0

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

更新：

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

于 2013-10-29T22:24:59.903 回答
0

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

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

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

我的视频现在播放！

于 2014-03-05T02:10:16.700 回答