html - 如何强制视频在图像上播放？

Question

如何在单击图像缩略图时强制视频在图像上播放，并同时滚动回播放器所在的顶部？

我的问题和背景:我正在从事一个大型摄影和视频元素，为此我决定(尝试... :) 我不是程序员)完全在Google Blogger 博客。

一切正常并且看起来很漂亮，但我决定在播放器播放的完全相同的位置伪造一个自定义播放器(实际上只是一个 JPEG 图像)。

播放器运行良好，但它在图像下方播放(假播放器)，因此您会听到播放器的声音但看不到视频。我想知道如何强制我的播放器播放这张图片。

这是网络电视的链接:http://montreal-images-tv.blogspot.com/

我的第二个问题是，当单击缩略图时，该网站应该返回顶部以查看播放器区域，但效果不是很好!...:(

如何在单击缩略图时强制网站自动滚动到顶部？

PS:我已经尝试过像 href="#top" 这样的带有 anchor 的代码，但没有成功!

Answer 1

您是否尝试过向视频容器添加 z 值？ (高于图像)例如。图像的 z 值为 1，视频的 z 值为 2。

#video {
     z-value:2;
}

#image {
     z-value:1;
}

至于滚动，我会尝试使用一点 jquery，因为它的效果非常好。

       $('.clickedClass').click(
            function(){
                       $('html, body').animate({
                                 scrollTop: '0px'
                        }, 'slow');
       });

任何具有“clickedClass”类的元素在单击时都会滚动到页面顶部。

更新:这里有一个用于滚动的 jsfiddle:http://jsfiddle.net/CMQNT/