Как изменить размер проигрывателя YouTube, от размера эскиза до «нормального» размера - PullRequest
Новая
       25

Как изменить размер проигрывателя YouTube, от размера эскиза до «нормального» размера

2 голосов
/ 22 августа 2009

Полагаю, это похоже на то, что делает Facebook, но ... я не понял, как следить за тем, что они делают, и если это обман, я прошу прощения.

Идея состоит в том, чтобы иметь проигрыватель размером с миниатюру (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, и я ' Я более чем счастлив использовать сторонний плагин, если таковой существует для этого.

Любая помощь приветствуется, я прошу прощения за то, что спрашиваю, что может - и делает - для меня, кажется, глупый вопрос. Это должно быть очевидным, я думаю.

Заранее спасибо.

Ответы [ 2 ]

5 голосов
/ 22 августа 2009

Facebook использует миниатюру, которая выглядит просто как игрок - хитрый трюк. Я нашел jQuery-плагин , который может получить эскизы 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, - получает URL-адрес миниатюрного изображения - вы можете получить большое или маленькое изображение.

2 голосов
/ 22 августа 2009

Поскольку я не видел обновления от Энди до сих пор, я нашел ... довольно ужасный способ сделать это (но я принял его ответ, так как он намного приятнее моего). 

        <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(). Это работает, после моды. Но скриншот -> crop -> save as video-id.png - утомительный, если не сказать больше. Я думаю, что я, вероятно, оставлю свое решение - как жалкую гордость, если ничего больше - но я попытаюсь объединить это с подходом jYoutube.

Если это не сработает, тогда я буду использовать ответ Энди.

<ч /> В качестве обновления я адаптировал вещи, чтобы они были немного более изящными, с помощью jQuery animate(): 

<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.

Это ... если я смогу понять, почему jQuery не позволяет ему иметь событие $(this).click(); ...

Иногда я просто хотел бы знать, когда остановиться ... любая помощь приветствуется ... =)

...