Question

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

.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中不支持？该怎么做？

Answer 1

您需要使用哪个IE版本？

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

Answer 2

我试图在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版本。

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

2 个答案: