إخفاء / جار إظهار فلاش فيديو مع جافا سكريبت

StackOverflow https://stackoverflow.com/questions/1054359

  •  20-08-2019
  •  | 
  •  

سؤال

وأنا محاولة تحميل يوتيوب فيديو جزءا لا يتجزأ من عند تحميل الصفحة الخاصة بي، ومن ثم إخفائه على الفور بمجرد تحميله. هذا يسير على ما يرام، ولكن عندما أريد لجعله مرئيا يبدو لمجرد ثانية ثم يختفي. هذا يحدث في كل من فايرفوكس 3.0 وسفاري 4، لم أحاول في أي المتصفحات الأخرى.

ولقد حاولت إخفائه باستخدام .style.display = 'لا شيء' ثم .style.display = ''؛ وstyle.display = 'كتلة'؛ لجعله مرئيا مرة أخرى، وكذلك حاولت استخدام مسج .hide () و. تظهر () ولكن كل الطرق تؤدي إلى يوتيوب فيديو التلاشي بعد جعلها مرئية.

هل هناك طريقة 'الصحيح' I يجب أن يكون جعل <كائن> ... <تضمين> علامات مخفية ومرئية باستخدام جافا سكريبت حتى لا تختفي عندما أحاول جعله مرئيا؟ السبب في أنني لست مجرد تحميل الفيديو 2ND حيوي عندما كنت في حاجة إليها وأريد شريط الفيديو لبدء تحميل بحيث تتوفر على الفور أن يكون لعبت عندما وأنا على استعداد لجعله مرئيا.

وفيما يلي بلدي HTML وجافا سكريبت مقتطفات الشفرة:

والبكم ()، ولعب ()، ووقف () هي باكر لمجرد يوتيوب جافا سكريبت المكالمات من نفس اسم المعهد.

ويسمى

وswitchVideoPlayers () من زر أتش تي أم أل تمر 1 و 2 كما oldid وNEWID على التوالي.

وأنا لا يمكن أن معرفة ما قطع أنني يجب أن تشتمل على قصاصات، حتى لقد ملقاة على صفحة كاملة أدناه: 

<html>
<head>
<title>YouTube test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>

var player = new Array();
var currentplayer = 1;

function onYouTubePlayerReady(playerid)
{
    if (playerid.indexOf('obj') > -1)
    {
        playerid = playerid.substring(3);
    }

    debug("player " + playerid + " loaded");

    player[playerid] = document.getElementById(playerid);

    if (playerid == 1)
        player[playerid].loadVideoById('5hSW67ySCio');
    else
    {
        player[playerid].loadVideoById('VgMVHc5N3WM', 10); //videoid
        mute(playerid);
        setTimeout(function() { 
            stop(playerid);
            $("#obj" + playerid).hide();
        }, 1000);   

    }
}

function play(id)
{
    player[id].playVideo();
}

function pause(id)
{
    player[id].pauseVideo();
}

function stop(id)
{
    player[id].stopVideo();
}

function mute(id)
{
    player[id].mute();
}

function unmute(id)
{
    player[id].unMute();
}


function seek(id,seconds)
{
    player[id].seekTo(seconds, false);
}

function getCurrentTime(id)
{
    return player[id].getCurrentTime();
}

function loadNewVideo(id,videoid, startseconds)
{
    player[id].loadVideoById(videoid, startseconds);
    mute(id);
    setTimeout(function() { stop(id); }, 1000); 
}

function switchVideoPlayers(oldid, newid)
{
    stop(oldid);
    $("#obj" + oldid).hide();

    $("#obj" + newid).show();
    setTimeout(function() {
        unmute(newid);
        play(newid);
    }, 10);
}

function debug(message)
{
    $('#debug').html($('#debug').html() + message + "<br />");
}


</script>

</head>

<body>

<object id='obj1' width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed id='1' src="http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

<object id='obj2' width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed id='2' src="http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>


<br />
<br />

<input type='button' value='Play' onclick='play(currentplayer);' />
<input type='button' value='Pause' onclick='pause(currentplayer);' />
<input type='button' value='Stop' onclick='stop(currentplayer);' />
<input type='button' value='Mute' onclick='mute(currentplayer);' />
<input type='button' value='UnMute' onclick='unmute(currentplayer);' />
<input type='button' value='Seek' onclick='seek(currentplayer,getCurrentTime(currentplayer) + 10);' />
<input type='button' value='Get Current Time' onclick='alert(getCurrentTime(currentplayer));' />
<input type='button' value='load strain video' onclick='loadNewVideo(currentplayer+1,"VgMVHc5N3WM", 10);' />
<input type='button' value='switch to next video' onclick='switchVideoPlayers(currentplayer,currentplayer + 1);' />

<br />
<br />
<a href='http://code.google.com/apis/youtube/js_api_reference.html'>api</a>

<div id='debug'>DEBUG MESSAGES:<br />
</div>
</body>

</html>
هل كانت مفيدة؟

المحلول

ومعظم المتصفحات علاج فلاش مثل هذا - عند إخفاء + اظهار ذلك، فإنه سيتم إعادة تهيئة فرنك سويسري

إذا كنت لا تريد أن تحصل على إعادة تهيئة، يمكنك فقط نقلها للخروج من الطريق (الموقف المطلق عليه) - شيء من هذا القبيل -9999px أو شيء من هذا، وبعد ذلك فقط نقله مرة أخرى إلى مكان عندما تريد اظهار ذلك.

نصائح أخرى

وأخذت نظرة أخرى على هذا، وتبين وظيفة onYouTubePlayerReady () يحصل على استدعاء مرة أخرى عندما يتم الفيديو مرئية. داخل هذه الوظيفة يسمى رمز لإخفاء الفيديو مرة أخرى وهذا هو السبب انها تختفي.

في معظم المتصفحات يمكنك تجنب مشكلة إعادة التهيئة من خلال تعيين visibility: hidden; النمط المغلق

وهذا أمر مزعج قليلا منذ فيلم فلاش لا يزال يحتل نفس الموقف في تدفق الصفحة، لكنه سيبقي فرنك سويسري غير مرئية ويساعد على تخفيف مشاكل مثل فلاش تظهر من خلال تراكب (مثل العلبة الخفيفة)

في الأوبرا، فرنك سويسري مخفي توقف عن الاستجابة إلى وظائف تتعرض لجافا سكريبت عبر ExternalInterface.addCallback حتى هذا الحل قد يكون مقبولا لأي من هذه الأسباب.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top