6

我一直在尝试显示图像，并且在悬停时，视频会开始替换图像，我使用 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 和源代码，但仍无法按预期工作。

HTML5 中的视频不可能使用剪辑路径吗？如果是这样，我该怎么做，如果不是，我怎样才能使它工作？

我再解释一下：我不希望图像调整大小，保持比例与否，我只是想切断，例如左右一些像素，所以海报中的图像大小完全相同作为替换它的视频。Clip-path 似乎与我正在寻找的内容相对应，但我无法让它工作。

谢谢。

4

2 回答 2

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>

于 2015-06-07T11:49:31.463 回答
-1 
.svg-clipped-text {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_);
}



<video loop width="100%" height="100%" autoplay class="svg-clipped-text">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
    </video>
<div class="demo">
    <svg height="0" width="0">

        <clipPath id="SVGID_2_">
            <path id="SVGID_3_" d="M770.5,483c3.1,12.8-2.2,30.7-11.8,39.7L498,770c-9.5,9.1-27.7,13.4-40.3,9.7L113.2,677.5
            c-12.6-3.7-25.4-17.3-28.5-30L0.9,298c-3.1-12.8,2.2-30.7,11.8-39.7L273.4,11C282.9,2,301-2.4,313.6,1.3l344.5,102.1
            c12.6,3.7,25.4,17.3,28.5,30L770.5,483z"/>
        </clipPath> 
    </svg>

于 2018-09-26T06:23:33.937 回答