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

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

  •  2
  • David Thomas  · 技术社区  · 15 年前

    我想这和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 回复  |  直到 14 年前
        1
  •  5
  •   Andy Gaskell    15 年前

    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
  •  2
  •   David Thomas    15 年前

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

            <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(); 事件…

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