我一直在尝试显示图像,在悬停时,视频会开始替换图像,我使用Javascript作为悬停功能.
我在视频标签中使用"海报"这样做:`
<div class="video">
<video id="videotest" poster="images/img.jpg">
<source src="images/bkg.mp4" type="video/mp4"></source>
Can't use videos here.
</video>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,我希望视频的大小与图像相同.视频为1280*720,图像为677-611.我试图使用剪辑路径来调整视频,但它不起作用,这是我的CSS:
.video {
text-align:center;
margin:0 auto;
height:auto;
clip-path:inset(0 978px 611px 301px);
-webkit-clip-path:inset(0 978px 611px 301px);
}
Run Code Online (Sandbox Code Playgroud)
我尝试将此样式应用于.video,#videotest和source,它仍然没有按预期工作.
是否无法在HTML5中使用带有视频的剪辑路径?如果是这样,我怎么能这样做,如果没有,我怎么能让它工作?
我会再解释一下自己:我不希望图像调整大小,保持比例与否,我只想切断,例如左右一些像素,所以海报中的图像大小完全相同视频取代它.剪辑路径似乎与我所寻找的相符,但我无法让它工作.
谢谢.