代码之家 › 专栏 › 技术社区 › David Thomas

如何将YouTube播放器从缩略图大小调整为“正常”大小

jquery-1.3.2 youtube jquery

2

David Thomas · 技术社区 · 16 年前

我想这和Facebook的做法很相似,但……我还没搞清楚如何跟踪他们的做法,如果这是一个骗局,我道歉。

想法是有一个缩略图大小的播放器( width="220px" height="180px" )当单击时,它会调整到“正常”大小(当然,正常是任意的,但是为了这个例子,如果我们继续 width="445px" , height="364px" 然后播放。

我假设onclick事件应该更改 <object> 和 <embed> 标签,但由于对象是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都有jquery 1.3.2链接,如果有这样的插件,我很乐意使用第三方插件轻松做到这一点。

任何和所有的帮助都是感谢的,我很抱歉地问,在我看来,什么可能是一个愚蠢的问题。它应该我想是显而易见的。

事先谢谢。

2 回复 | 直到 15 年前

1

5

Andy Gaskell 16 年前

Facebook使用了一个看起来像是玩家的缩略图-巧妙的技巧。我找到了一个 jQuery plugin 这可以得到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

David Thomas 16 年前

因为我直到现在才看到安迪的最新消息,所以我想出了一个……相当可怕的方法(但我接受了他的回答,因为它比我的好得多)。

        <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() 代码。它很实用,很时尚。但至少可以说,屏幕截图--gt;裁剪--gt;另存为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> 希望它可以通过单击处理程序将Flash视频对象缩小并替换为原始对象。 .png .

这是…如果我能弄明白为什么jquery不让它 $(this).click(); 事件…

有时候我只是希望我知道什么时候该停下来…感谢您的帮助…=)