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

标签 html css image video web

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

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

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

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

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

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

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

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

最佳答案

您是否尝试过向视频容器添加 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/

关于html - 如何强制视频在图像上播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17352700/

相关文章:

html - 如何使菜单弹出窗口可见?

jquery - 滚动多个像素时将位置更改为固定 (jQuery)

javascript:用 href 替换按钮

jquery - 如何混合使用 Bootstrap .well 和 .button 类?

html - Google Chrome 渲染问题,而代码在 IE 上运行

php - 应避免使用 "Imagick::flattenImages method is deprecated and it' s”

javascript - 温泉 : create right to left slide button

css - 如何在 Material 中创建响应式页脚?

image - ffmpeg:将多个图像叠加到视频中

image - 如何确定图像的编码