كيفية تغيير حجم مشغل YouTube، من حجم الصورة المصغرة إلى حجم "طبيعي"

Question

أعتقد أن هذا يشبه ما يفعله Facebook، ولكن ... لم أعمل في كيفية اتباع ما يفعلونه وإذا كان هذا هو DUPE، أعتذر.

الفكرة هي أن يكون لديك لاعب حجم الصورة المصغرة (width="220px" height="180px") أنه، عند النقر، يتغير إلى حجم "طبيعي" (طبيعي يعسفي، بالطبع، ولكن من أجل هذا المثال، إذا ذهبنا مع width="445px", height="364px" كما افتراضي YouTube) ثم يلعب.

أفترض أن الحدث OnClick يجب أن يغير خصائص الارتفاع والعرض المحدد في <object> و <embed> العلامات، ولكن نظرا لأن الكائن هو الفلاش، أفترض أن الفلاش لاعب "يلتقط" النقرات بدلا من الإبلاغ عنها إلى المتصفح؟

الفيديو التالي هو أحد تلك التي أنوي استخدامها، وهي هنا لإعطاء مثال عالمي حقيقي:

<object class="yt" width="445" height="364">
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
</object>

كإضافة، من المحتمل أن يتم استخدام هذا في صفحة HTML ثابتة لفترة قصيرة، ويتم نقلها إلى موقع PHP (5.2) بعد ذلك بفترة وجيزة، كل من PHP و HTML يحتوي على JQuery 1.3.2 مرتبطا، وأنا أكثر من سعيد لاستخدام البرنامج المساعد لجهة خارجية إذا كان هذا موجودا للقيام بذلك بسهولة.

أي وكل المساعدة موضع تقدير، أنا آسف لسؤال ما قد يحدث، بالنسبة لي، يبدو أن سؤال غبي. هو - هي ينبغي كن واضحا، أعتقد.

شكرا مقدما.

Answer 1

يستخدم Facebook صورة مصغرة يشبه اللاعب - خدعة أنيقة. لقد وجدت ال مسج البرنامج المساعد التي يمكن أن تحصل على الصور المصغرة YouTube، لم أحاول ذلك.

بعض رمز العينة:

<div id="youtoobin">

</div>

<div id="blarg" style="display:none">
    <object class="yt" width="445" height="364">
    <param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
    </object>
</div>

و JS:

<script>
    $(function() {
    $("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>");

        $("#thumby").live("click", function() {
            $("#youtoobin").html($("#blarg").html());
        });
    });
</script>

حولت التشغيل التلقائي منذ ذلك الحين، ربما تريد أن يكون المستخدم قيد التشغيل على الصورة. يجب أن يكون هذا نقطة انطلاق جيدة للتكامل في التطبيق الخاص بك. الشيء الوحيد الذي يقوم بمسافة JQuery Plugin هو الحصول على عنوان URL للحصول على صورة المصغرة - يمكنك الحصول على صورة كبيرة أو صغيرة.

Answer 2

لأنني لم أر التحديث من أندي "سمسم الآن، لقد توصلت إلى ... طريقة فظيعة إلى حد ما للقيام بذلك (لكنني قبلت إجابته، لأنها أجمل كثيرا من الألغام).

        <script type="text/javascript">
  $(document).ready(function(){

    $("img").click(function () {

    var videoID = $(this).attr("id");

    $(this).replaceWith("<object class=\"yt\" width=\"445\" height=\"364\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"445\" height=\"364\"></embed></object>");

    });

  });

        </script>

المستخدمة في الحفل مع HTML التالي:

<dl>
<dt>Thoughts of Sacrament</dt>
<dd><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" class="yt" /></dd>

<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" class="yt" /></dd>
</dl>

حل بلدي، يأخذ #id سمة من الصورة النقر ثم إدراج ذلك في replaceWith() الشفرة. انها تعمل، بعد الموضة. لكن لقطة الشاشة -> المحاصيل -> حفظ كأسير الفيديو id.png مملة، ليقول أقل. أعتقد أنني ربما سأبقي الحل الخاص بي - مسألة فخر مثير للشفقة إذا لم يكن هناك شيء آخر - لكنني سأحاول ويجمع ذلك مع نهج Jyoutube.

إذا لم ينجح ذلك، فسأكون قد أستخدم إجابة Andy.

---

كحدث، لقد قمت بتكييف أشياء أن تكون أكثر رشيقة قليلا، مع jQuery's تحريك ():

<script type="text/javascript">
$(document).ready(function(){

    $("img").click(function () {

        var videoID = $(this).attr("id");

        $(this).animate({ 
        width: "445px",
        height: "364px"
        }, 600, function() { 

            $(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object><span class=\"close\"><a href=\"#\">x</a></span>");
        });
    });

});
        </script>

أيضا، أنا توليد <span class="close"><a href="#">x</a></span>, ، والتي نأمل أن تخدم، مع معالج نقرة، قم بتقليص كائن الفيديو الفلاش مرة أخرى واستبدالها بالأصل .png.

هذا ... إذا كان بإمكاني العمل، فلماذا لن يسمح لجائق $(this).click(); حدث...

أحيانا أتمنى أن أعرف متى أتوقف ... أي مساعدة موضع تقدير ... =)