剪辑路径不适用于视频

Question

我一直在尝试显示图像,在悬停时,视频会开始替换图像,我使用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>

但是,我希望视频的大小与图像相同.视频为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);
}

我尝试将此样式应用于.video,#videotest和source,它仍然没有按预期工作.

是否无法在HTML5中使用带有视频的剪辑路径？如果是这样,我怎么能这样做,如果没有,我怎么能让它工作？

我会再解释一下自己:我不希望图像调整大小,保持比例与否,我只想切断,例如左右一些像素,所以海报中的图像大小完全相同视频取代它.剪辑路径似乎与我所寻找的相符,但我无法让它工作.

谢谢.

Answer 1

好吧，这是您在视频标签中添加的 HTML 代码poster="transparent.jpg"以通过 css 背景调用它，并preload="none"以使海报可见，然后确保添加适用于浏览器的视频扩展名在视频标签内的源标签中不幸的是，我无法找出适用于 safari 的扩展程序，如果您将视频作为一个扩展程序添加到源文件夹中，它可能会起作用，但我从未尝试过

.video {
        background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat;
	background-size:  677px 611px;
	text-align:center;
	margin: 0 auto;
	width: 677px; 
        height:611px;
}

video { 
            width: 677px; 
            height:611px;
            object-fit:inherit;
    	}

    	<div class="video">
    	    <video controls="true" id="videotest" poster="transparent.jpg" preload="none">
    	        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
    		    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
    		    <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
    	    </video>
    	</div>