1

我正在开发一些 javascript 以使用tubeplayer插件将 youtube 视频插入页面。视频在用户单击链接时插入，在用户单击关闭按钮时删除。

在大多数情况下，脚本工作正常。当用户点击关闭按钮时，按钮滑开，视频播放器淡出，容器淡出，一切看起来都和用户点击链接前一样。

然而，在 Chrome 中，当一切都淡出之后，视频和关闭按钮偶尔会在短暂的闪光中重新出现。它并不一致——它只发生了大约一半的时间——但它看起来很糟糕。

我已经尝试了各种各样的方法来解决这个问题——隐藏元素，而不是隐藏元素，在脚本中的各个点删除元素——而且它一直在发生。我唯一确定的是，tubeplayer 是必要的元素。如果我取出 tubeplayer 并仅显示/隐藏其他元素，则不会出现闪光灯。

我完全不知道如何防止这种情况发生。任何帮助将不胜感激。

这是我的标记：

<section id="hero">
  <div class="item-content">
    <a href="http://www.youtube.com/watch?v=sC_IESaVT0A" class="youtube">
      <img src="/dynamic-content/solutions/hero_content_mobility.png">
    </a>
  </div>
</section>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        jnet.ytplayer.init('#hero', 711, 400, '#000');
    });
</script>

和脚本：

ytplayer = {

    $target:null,
    height:null,
    width:null,
    background:null,
    defaults:{
     allowFullScreen: "true",
     initialVideo: 'FtUtE_kv7DU',
     preferredQuality: "default",
     showControls: 1,
     showRelated: 0,
     autoPlay: 1,
     autoHide: 3,
     border: 0,
     theme: 'dark',
     wmode: 'opaque',
     origin: document.domain,
     swfobjectURL: "/assets/js/jquery/plugins_jq.js",
     allowScriptAccess: "always",
     playerID: "tubeplayer-player-container",
     loadSWFObject: false,
     iframed: true,
     onPlayerEnded: function(){
         ytplayer.removeVideo();
        }
    },
    init:function(target, w, h, bg){
        this.$target = $(target);
        this.defaults.height = h;
        this.defaults.width = w;
        this.background = bg;

    },
    showVideo:function(link){
        var id = $(link).attr("href").replace("http://www.youtube.com/watch?v=", "");
        this.defaults.initialVideo = id;
        var markup = "<div id='youtube-container'>";
        markup +=           "<div id='youtube-player'>";
        markup +=            "<div id='youtube-closeBtn'></div>";
        markup +=            "<div id='youtube'></div>";
        markup +=           "</div>";
        markup +=       "</div>";
        this.$target.prepend(markup);
        $('#youtube-closeBtn').click(function(){
            ytplayer.removeVideo();
        });

        $('#youtube-container').height(this.defaults.height);
        $('#youtube-container').css('background', this.background);
        $('#youtube').height(this.defaults.height);
        $('#youtube').width(this.defaults.width);
        $('#youtube-player').height(this.defaults.height);
        $('#youtube-player').width(this.defaults.width);
        $('#youtube-container').fadeIn(200);
            $('#youtube-player').fadeIn(600, function() {
                $('#youtube').tubeplayer(ytplayer.defaults);
                $('#youtube-closeBtn').show();
                $('#youtube-closeBtn').animate({ 'right' : '-=49' }, 600, function(){
            });
        });
    },
    removeVideo:function(){
        $('#youtube-closeBtn').animate({'right' : '+=49'}, 200, function() {
            $('#youtube-closeBtn').hide();
            $('#youtube').tubeplayer('stop');
            $('#youtube-player').fadeOut(600, function(){
                $('#youtube-container').fadeOut(100, function(){
                    $('#youtube-container').remove();
                });
            });
        })
    }

}
4

0 回答 0