如何在选择特定链接后在同一位置显示五个视频之一？

Question

我有5个5个div，在这些div的悬停中我正在对话框中显示内容...右边的对话框我想放置各个div的视频..

在div1上悬停它应该显示第一个视频，在第二个div的悬停时它应该显示第二个视频等等...

那么如何在各个div的悬停中在同一个地方显示不同的视频???

以下是截图：

请尽早回复.. 提前谢谢......

Answer 1

如果您使用的是一个视频对象，则可以更改src属性。 尚未测试过，但看起来很有希望......

方法1：将您的视频网址存储在数组中

var initVideos = function(){
    var videos = ["http://urlVideo1.flv", "http://urlVideo2.flv", ...],
        videoArea = $("#videoArea"),
        divs = $("ul li div"); // or some other selector for your HTML

    // bind your hover event to the divs
    divs.hover(
        // mouseover
        function(){
            videoArea.show();
            videoArea.find("object > embed").prop("src", videos[$(this).index()]);
        },
        // mouseout
        function(){
            videoArea.hide();
        }
    );
};

// once the DOM is ready
(function(){
    initVideos();
});

演示： http://jsfiddle.net/tive/J6WQm/

要微调这一点，您应该在加载上一个事件完成后才更改src。 否则，当您悬停太快时，浏览器可能会产生过多的重新流动。

另外，根据您使用的对象代码可能会有所不同。目前我只触发嵌入对象（mozzila浏览器），但对象（IE）也应该在param电影值上触发。

为了对抗这些不同的对象程序逻辑，人们使用swf object为您生成该代码块。现在这已经过时了一段时间。

因此，更合适的方法可能是使用flashembed

方法2：使用菜单中链接的href属性

var initVideos = function () {
    var divs = $("ul li a");

    // bind your hover event to the divs
    divs.mouseenter(
        // mouseover
        function () {
            flashembed("videoArea", $(this).prop("href"));
        });
    };

    // once all is loaded
    $(window).load(function () {
        initVideos();
    });

演示 http://jsfiddle.net/tive/Ff7Mq/ 不幸的是，这个库在jsfiddle中不起作用。也高达jquery 1.7支持。 也许有人知道最新的插件。

编辑：只需要CSS才能使其正常工作^^

Answer 2

I have made one simple fiddle as per your requirement. Please check below link.

http://jsfiddle.net/vvbsr/2/