1

嗨，我使用 iframe api 创建了 yt 电影播放器​​。我在移动版 Google chrome 上遇到了问题。要开始电影，我使用了 playVideo() 函数。我看到那部电影正在加载，但在那之后我只看到黑色的播放器没有声音。我在我的电脑、Google Chrome for mobile、我的同事 iPhone 4s 甚至在我的带有原生浏览器的 HTC Wildfire S 上对其进行了测试。一切都很好。

例子

创建电影：

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1, player2, player3;
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('ytapiplayer1', {
        height: '390',
        width: '640',
        videoId: 'Vhik235dWLk',
    });
    player2 = new YT.Player('ytapiplayer2', {
        height: '390',
        width: '640',
        videoId: 'p_Y5WjjVb9I',
    });
    player3 = new YT.Player('ytapiplayer3', {
        height: '390',
        width: '640',
        videoId: '6HOo7_NNHu4',
    });
}

HTML：

<div id="owl-example" class="owl-carousel">
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/Vhik235dWLk/0.jpg)">
        <div id="ytapiplayer1"></div>
    </div>
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/p_Y5WjjVb9I/0.jpg)">
        <div id="ytapiplayer2"></div>
    </div>
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/6HOo7_NNHu4/0.jpg)">
        <div id="ytapiplayer3"></div>
    </div>
</div>

CSS：

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

JS启动猫头鹰轮播并播放，停止电影

$(document).ready(function() {
$("#owl-example").owlCarousel({
    singleItem : true,
    afterMove: function(){
        $('.video-container').css('background-position', 'center')
        $('iframe').hide();
        player1.stopVideo();
        player2.stopVideo();
        player3.stopVideo();
    }
});

$('body').on('click', '.video-container', function(){
    var owl = $(".owl-carousel").data('owlCarousel');
    console.log(owl.currentSlide)
    if (owl.currentSlide == 0){
        player1.playVideo()
    }
    if (owl.currentSlide == 1){
        player2.playVideo()
    }
    if (owl.currentSlide == 2){
        player3.playVideo()
    }

    $(this).css('background-position', '-1000px -1000px');
    $(this).find('iframe').show()
});
});
4

0 回答 0