2

我想这类似于 Facebook 的做法，但是……我还没有弄清楚如何遵循他们的做法，如果这是一个骗局，我道歉。

这个想法是有一个缩略图大小的播放器 ( width="220px" height="180px")，当点击它时，它会调整为“正常”大小（正常是任意的，当然，但为了这个例子，如果我们使用width="445px"，height="364px"作为 Youtube 默认值）然后播放。

我假设 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，我不止很高兴使用第三方插件（如果存在）可以轻松完成此操作。

感谢任何和所有的帮助，我很抱歉问什么可能 - 并且在我看来 - 似乎是一个愚蠢的问题。我猜应该很明显。

提前致谢。

4

2 回答 2

5

Facebook 使用了一个看起来像播放器的缩略图——巧妙的把戏。我找到了一个可以获取 youtube 缩略图的jQuery 插件，不过我还没有尝试过。

一些示例代码：

<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 - 你可以得到一个大的或小的图像。

于 2009-08-21T23:59:24.030 回答
2

因为直到现在我还没有看到安迪的更新，所以我想出了一个……相当可怕的方法来做到这一点（但我接受了他的回答，因为它比我的要好得多）。

        <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()代码中。它工作，在时尚之后。但是截图 -> 裁剪 -> 另存为 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();事件......

有时我只是希望我知道什么时候停止......感谢任何帮助...... =）

于 2009-08-22T17:33:28.120 回答