Question

我正在尝试在网站上显示全角。 chrome一切正常，但现在问题出在IE11上。视频本身似乎未设置为全宽。

您可以在图像中看到，左侧和右侧都有黑色部分。但是如果你看下面的图片

如您所见，此处的视频已设置为全角。知道有什么问题吗？下面是CSS

.html--homepage_content {
    video {
        width: 100%;
        max-height: 100%;

        @media #{$mqMediumAndUp} {
            width: initial;
            max-height: initial;
        }
    }

    .video-player-container {
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
}

.video-player-container {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;

    video {
        width: 100% !important;
        height: 100% !important;

        @media #{$mqMediumAndUp} {
            width: initial !important;
            height: initial !important;
        }

        object-fit: cover;
        text-align: center;
    }
}

HTML

<div class="video-player-container content-block__content">
    <video autoplay="" muted="" loop="" playsinline="">
        <source src="http://website.com/video/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video> 
</div>

Answer 1

可能是视频缩放模式。例如，检查https://www.sitepoint.com/community/t/how-to-fit-video-into-entire-div-that-works-on-ie-too/283224。

如果它对您不起作用，并且您知道视频的尺寸，则可以始终手动缩放到其他div中以不可见的偏移量进行缩放，但这是一个丑陋的解决方案。

Answer 2

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .video-player-container {
      width: 100%;
    }
    
    .video-player-container video {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="video-player-container content-block__content">
    <video width="100%" height="240" autoplay="" muted="" loop="" playsinline="" controls>
        <source src="http://website.com/video/video.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 3

object-fit: cover是not supported in IE 11。您可以为此使用polyfills。请检查this polyfill。

您可以像下面那样使用它，记得将src中的polyfill更改为您的，它可以在IE 11中正常工作：

<style>
    .container {
        width: 100%; /* Or whatever you want it to be */
        height: 25em; /* Or whatever you want it to be */
    }

    .media {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Or whatever object-fit you want */
    }
</style>

<div class="container">
    <video autoplay="" muted="" loop="" playsinline="" data-object-fit="cover" class="media">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>
<script src="js/objectFitPolyfill.min.js"></script>

视频标签全角IE

3 个答案: