Как изменить размер проигрывателя YouTube, от размера эскиза до "нормального" размера
Я предполагаю, что это похоже на то, что делает 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 ответа
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-адрес миниатюрного изображения - вы можете получить большое или маленькое изображение.
Поскольку я не видел обновления от Энди до сих пор, я придумал... довольно ужасный способ сделать это (но я принял его ответ, так как он намного приятнее, чем мой).
<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();
событие...
Иногда я просто хотел бы знать, когда остановиться... любая помощь приветствуется... =)