Question

我正在制作一个小型的wordpress模板，该模板应该允许管理员使用YouTube视频创建一个bootstrap carousal。播放视频时应停止播放，如果用户点击下一张幻灯片，视频播放应停止。

它在我测试的大多数浏览器（chrome，firefox和safari）中运行良好，但我在IE 11中有两个问题。

当我尝试使用诸如player.pauseVideo（）之类的函数时，我得到错误'对象不支持属性或方法'pauseVideo'。
第二个问题是当转盘第二次显示iframe时。在这种情况下，显示带有播放按钮的黑屏，而不是播放视频之前显示的图像。当您单击播放按钮时，视频会按原样加载。

我在这个领域很新，所以我希望有人可以提供帮助。我已经发布了以下代码。

更新：我卸载了IE 11更新，所以我回到了IE 10，现在我遇到的第一个问题......所以我会尝试更新againg。

HTML：

<div id="carousel-example-generic" class="carousel slide">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="video-container darkBlueBorder item <?php if( $the_query->current_post == 0 ):?>active<?php endif; ?>" >
            <div class="musicVideo" id="<?php echo get_post_meta($post->ID, "youtube_url", true) ?>"></div>
            <div class="carousel-caption"><?php the_title(); ?></div>
        </div>

        <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" style="bottom: 40px;" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" style="bottom: 40px;" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

JS：

//Start Carousel
jQuery('.carousel').carousel({
    interval: 5000
});


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

var youtubeReady = false;

//Variable for the dynamically created youtube players
var players= new Array();

function onYouTubeIframeAPIReady(){
youtubeReady = true;
//The id of the iframe is the same as the videoId   
jQuery(".musicVideo").each(function(i, obj) {
    players[obj.id] = new YT.Player(obj.id, {         
        videoId: obj.id,
        playerVars: {
            controls: 0,
            showinfo: 0 ,
            wmode: "opaque"
         },   
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
 });
}

jQuery('.carousel').bind('slide.bs.carousel', function (e) {
    if(youtubeReady){
        var iframeID = jQuery(this).find('.active').find('iframe').attr("id");
        window.alert(iframeID);
        players[iframeID].pauseVideo();
        jQuery('.carousel').carousel('cycle');
    }  
});

function onPlayerStateChange(event) {
    switch(event.data){
        case 0:
            jQuery('.carousel').carousel('cycle');
            break;
        case 1:
            jQuery('.carousel').carousel('pause');
            break;
        default:
            console.log("otherwise");
            break;
        }
    }
}

Answer 1

更新：我通过强制youtube播放器成为html5播放器解决了黑色预览图像的问题。这也解决了我在IE中遇到的一些严重的帧率问题。所以我只是添加了＃34; html5：1＆＃34;对于playerVars。

与youtube iframe api一起使用Bootstrap轮播时IE 11的问题

1 个答案: