tubeplayerプラグインを使用して、YouTube ビデオをページに挿入する JavaScript に取り組んでいます。ビデオは、ユーザーがリンクをクリックすると挿入され、ユーザーが閉じるボタンをクリックすると削除されます。
ほとんどの場合、スクリプトは正常に動作します。ユーザーが閉じるボタンをクリックすると、ボタンがスライドして離れ、ビデオ プレーヤーがフェードアウトし、コンテナーがフェードアウトし、すべてがユーザーがリンクをクリックする前と同じように表示されます。
ただし、Chrome では、すべてがフェードアウトした後、ビデオと閉じるボタンが一瞬で再表示されることがあります。一貫性はありません - 約半分の時間しか発生しません - しかし見た目は悪いです。
これを修正するためにあらゆる種類のことを試しました-要素を非表示にする、要素を非表示にしない、スクリプトのさまざまな時点で要素を削除する-そしてそれは起こり続けます。私が確信しているのは、チューブプレイヤーが必要な要素であることだけです。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();
});
});
})
}
}