Question

您好我使用iframe api创建了yt电影播放器。我在Google Chrome移动设备上遇到了问题。要启动电影，我使用了playVideo（）函数。我看到那部电影正在加载，但之后我只看到没有声音的黑色球员。我在我的电脑，谷歌浏览器移动设备，我的同事iPhone 4s甚至我的HTC Wildfire S上使用本机浏览器进行了测试。一切都很好。

Example

制作电影：

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

谷歌Chrome移动浏览器下的Youtube iframe api

0 个答案: