问题
I guess this is similar to what Facebook does, but...I haven't worked out how to follow what they do and if this is a dupe, I apologise.
The idea is to have a thumbnail-size player (width="220px" height="180px") that, when clicked, resizes to a 'normal' size (normal is arbitrary, of course, but for the sake of this example, if we go with width="445px", height="364px" as the Youtube default) and then plays.
I'm assuming that the onClick event should change the height and width properties defined in the <object> and <embed> tags, but since the object is flash I assume the flash player 'captures' the clicks rather than reporting them to the browser?
The following video is one of those I intend to use, and is here to give a real-world example:
<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>
As an addenda, this is likely to be used in a static html page for a short while, and be moved to a php (5.2) site shortly afterwards, both php and html have jQuery 1.3.2 linked, and I'm more than happy to use a third-party plugin if such exists to do this easily.
Any and all help is appreciated, I'm sorry for asking what may -and does, to me- appear to be a dumb question. It should be obvious, I guess.
Thanks in advance.
回答1:
Facebook uses a thumbnail that just looks like a player - neat trick. I found a jQuery plugin that can get youtube thumbnails, I haven't tried it though.
Some sample code:
<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>
And the JS:
<script>
$(function() {
$("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>");
$("#thumby").live("click", function() {
$("#youtoobin").html($("#blarg").html());
});
});
</script>
I turned autoplay on since you probably want that if the user is clicking on the image. This should be a good starting point for integrating into your app. The only thing the jQuery plugin does is get the url for the thumbnail image - you can get a large or small image.
回答2:
Because I didn't see the update from Andy 'til now, I came up with a...fairly horrible way to do this (but I accepted his answer, since it's so much nicer than mine).
<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>
Used in concert with the following 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>
My solution, takes the #id attribute from the clicked image and then inserts that into the replaceWith() code. It works, after a fashion. But the screenshot -> crop -> save as video-id.png approach is tedious, to say the least. I think I'll probably keep my solution -as a matter of pathetic pride if nothing else- but I'll try and combine that with the jYoutube approach.
If that doesn't work, then I'll be using Andy's answer.
As an update, I've adapted things to be a little more graceful, with jQuery's
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>
Also, I'm generating a <span class="close"><a href="#">x</a></span>, which hopefully should serve, with a click-handler, to shrink the flash video-object back down and replace it with the original .png.
This is...if I can work out why jQuery won't let it have a $(this).click(); event...
Sometimes I just wish I knew when to stop... any help is appreciated... =)
来源：https://stackoverflow.com/questions/1314662/how-to-resize-a-youtube-player-from-thumbnail-size-to-normal-size