全宽背景视频作为IE中的横幅?

这是我到目前为止的代码...

.video-box{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	-webkit-transform-style: preserve-3d;
}
.video-box video{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	height: auto;
	width: 100%;
	object-fit: cover;
}

<div class="video-box">
<video autoplay muted loop>
<source src="../videos/spark.mp4" type="video/mp4">
</video>
</div>

我想做的是：

我正在尝试添加背景视频作为横幅，它在 chrome 和 Firefox 中支持，但在 Internet Explorer 中不支持，该怎么办？

您需要哪个IE版本才能工作？

尝试在">

<head>"部分中将<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>添加到 HTML 文件中。

我尝试在IE 11浏览器中测试您上面提到的代码，发现您的代码工作正常。

以下是测试结果：

<!doctype html>
<html>
<head>
<title>video demo</title>
<style>
.video-box{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	-webkit-transform-style: preserve-3d;
}
.video-box video{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	height: auto;
	width: 100%;
	object-fit: cover;
}
</style>
</head>
<body>
<div class="video-box">
<video autoplay muted loop>
<source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>
</div>
</body>
</html>

我建议您尝试在IE浏览器中运行此示例，以查看它是否正常工作。

如果您使用的是任何旧版本的IE，建议升级到IE 11版本。

相关内容

最新更新

热门标签：