Jquery 如何调整YouTube播放器的大小,从缩略图大小调整为';正常';大小
我想这和Facebook的做法很相似,但是……我还没有弄清楚如何遵循他们的做法,如果这是一个骗局,我道歉 我们的想法是要有一个缩略图大小的播放器(Jquery 如何调整YouTube播放器的大小,从缩略图大小调整为';正常';大小,jquery,youtube,jquery-1.3.2,Jquery,Youtube,Jquery 1.3.2,我想这和Facebook的做法很相似,但是……我还没有弄清楚如何遵循他们的做法,如果这是一个骗局,我道歉 我们的想法是要有一个缩略图大小的播放器(width=“220px”height=“180px”),当点击时,它的大小会调整为“正常”大小(当然,正常是任意的,但是为了这个例子,如果我们使用width=“445px”,那么Youtube默认设置为height=“364px”),然后播放 我假设onClick事件应该更改和标记中定义的高度和宽度属性,但是由于对象是flash,我假设flash播放
width=“220px”
height=“180px”
),当点击时,它的大小会调整为“正常”大小(当然,正常是任意的,但是为了这个例子,如果我们使用width=“445px”
,那么Youtube默认设置为height=“364px”
),然后播放
我假设onClick事件应该更改
和
标记中定义的高度和宽度属性,但是由于对象是flash,我假设flash播放器“捕获”点击,而不是将其报告给浏览器
下面的视频是我打算使用的视频之一,在这里给出一个真实的例子:
<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都链接了jQuery1.3.2,我非常乐意使用第三方插件(如果存在的话)来轻松实现这一点
任何和所有的帮助都是感激的,我很抱歉问什么可能-并且做,对我来说-似乎是一个愚蠢的问题。我想这应该是显而易见的
提前感谢。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>
$(函数(){
$(“#youtoobin”)。附加(“”);
$(“#拇指”).live(“单击”,函数(){
$(“#youtoobin”).html($(“#blarg”).html());
});
});
我打开了autoplay,因为如果用户正在单击图像,您可能需要它。这应该是集成到应用程序中的一个良好起点。jQuery插件所做的唯一一件事就是获取缩略图的url——你可以得到一个大的或小的图像。因为我直到现在才看到Andy的更新,所以我想出了一个……相当可怕的方法来实现这一点(但我接受了他的答案,因为它比我的好得多) 另外,我正在生成一个
,希望它能通过一个点击处理程序,将flash视频对象缩小并替换为原来的.png
这是…如果我能找出为什么jQuery不让它有一个$(这个)代码>事件
有时候我只是希望我知道什么时候停止。。。感谢您的帮助……=) 我遇到的部分问题是,我对JS和jQuery完全陌生。虽然链接页面可能是一个救命稻草,但我看着它却不知道如何使用它。代码示例($.jYoutube('rSUfWXcNAOw');
)对我来说毫无意义,我不知道如何访问应该返回的信息。这些文档都指向了这篇博客文章,我想这篇文章是由一个已经了解JS/jQuery的人写的。谢谢你的帮助,但我还是迷路了……先生,你是个天才。我还没有收到你的更新/编辑通知,所以我只能为花了这么长时间才回复你并接受你的回答而道歉。
<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>
<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>
<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>