Question

我的网站上有一个很好的图像，上面有一个播放按钮。我想要做的是当用户点击图片时用视频（longtail video player）替换该图像。图像可以包含在链接或其他任何内容中。

通常情况下，人们只是会弹出一个模态窗口，但是我希望能够在图像所在的同一空间内找到更灵活的解决方案。

有没有办法用jQuery实现这个目的？

Answer 1

点击后，您可以使用<div>替换图片，然后设置如下所示的视频播放器：http://jsfiddle.net/hxaZx/。

$("img").click(function() {
    var $div = $("<div>").text("this is the div to use for video");

    $(this).replaceWith($div);

    // jwplayer($div.get(0)).setup({ ... });
});

Answer 2

如果您不介意视频包含onload，那么我会嵌入图像和视频，并在启动时隐藏视频。然后，将一个点击处理程序绑定到将隐藏图像并显示视频的图像。

var $image = $('#myimage');
var $video = $('#myvideo'); // hide #myvideo with css

$(function(){
    $image.on('click', function(){
        $image.hide();
        $video.show();
    });
});

Answer 3

有很多方法可以实现这一目标，但在不同的浏览器中经常会有一些问题需要解决。

一种方法是将播放器嵌入到以样式隐藏的视图中的页面（显示：无）。播放器可能必须将flash嵌入中的wmode属性设置为“透明”才能执行此操作。然后，您可以使用jquery的隐藏和显示方法隐藏图像并在同一位置显示嵌入：

$('#img-el').click( function () {
    $(this).hide();
    $('#player-embed-div').show();
});

另一种方法是使用SWFObject（http://code.google.com/p/swfobject/）在点击图片时动态嵌入视频：

$('#img-el').click( function () {
    var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
    so.write("img-el"); 
});

您可能需要调整上面的代码才能使其正常工作，因为Flash嵌入的处理方式不同，您可能会遇到浏览器的问题。

Answer 4

不久前，我正在寻找一种方法，将YouTube视频的jpeg缩略图变成一个放大和打开播放器的链接，与Facebook在新闻源中播放视频的方式类似。

我使用的解决方案（绝对不是oly方式，但对我有用）与Pimvdb的答案类似。

我只是有另一个页面，其中有YouTube播放器嵌入代码（通过将变量传递给URL动态填充正确的视频）然后使用jquery.load

加载

$('#imageElement').live("click", function () {
    $('#currentlyHiddenVideoDiv').load('videoPage.asp?vidid=idOfVideoToPlay').show()
}

你必须有自己的方法将所需的视频ID /链接传递到播放器页面，当然，我知道这不是YouTube播放器，而是嵌入式播放器在单独的文件中加载到所需的此方法中的页面应该大致相同。

这意味着视频内容仅在需要时加载，到那时您只需加载播放器按钮。

点击时用视频替换图像

4 个答案: