javascript - 谷歌浏览器播放视频时显示黑边

标签 javascript jquery html css

我添加了一个视频背景，除了谷歌浏览器和火狐浏览器在我播放视频时显示黑边外，一切正常(见图片)。当我在 Edge 和 Internet Explorer 上运行页面时，边缘没有出现。

编辑:我知道黑色边缘是因为我将容器设置为黑色背景，但我不希望容器出现在边缘。我只需要视频以全宽显示

enter image description here 

$( document ).ready(function() {

    // Resive video
    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');
        
    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

/** Reusable Functions **/
/********************************************************************/

function scaleVideoContainer() {

    var height = $(window).height();
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){
    
    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        videoWidth,
        videoHeight;
    
    console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width'),
            windowAspectRatio = windowHeight/windowWidth;

        if (videoAspectRatio > windowAspectRatio) {
            videoWidth = windowWidth;
            videoHeight = videoWidth * videoAspectRatio;
            $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
        } else {
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
        }

        $(this).width(videoWidth).height(videoHeight);

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');
        

    });
}
.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}

.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .description .inner {
  font-size: 1em;
  width: 45%;
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
  
}
.video-container video.fillWidth {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="intro" class="parallax-section">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
    <div class="video-container">
        <div class="title-container">
            <div class="headline">
                	<h1>Welcome to our Company</h1>

            </div>
            <div class="description">
                <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
            </div>
        </div>
        <div class="filter"></div>
        <video autoplay class="fillWidth">
            <source src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_480p.mov" type="video/mp4" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
           <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"  autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
        <div class="poster hidden">
            <img src="images/background.jpg" alt="">
        </div>
    </div>
</div>
<div class="container" id="content">
    <!-- adding this soon -->
    </div>
</section>

最佳答案

您可以使用 the object-fit property控制视频在其元素中的大小。

如果您想拉伸(stretch)视频以完全填充整个元素(就像 img 默认情况下所做的那样)，请使用:

object-fit: fill;

如果您想保持现有的宽高比，并且不介意裁剪顶部和底部，请使用:

object-fit: cover;


$( document ).ready(function() {

    // Resive video
    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');
        
    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

/** Reusable Functions **/
/********************************************************************/

function scaleVideoContainer() {

    var height = $(window).height();
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){
    
    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        videoWidth,
        videoHeight;
    
    console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width'),
            windowAspectRatio = windowHeight/windowWidth;

        if (videoAspectRatio > windowAspectRatio) {
            videoWidth = windowWidth;
            videoHeight = videoWidth * videoAspectRatio;
            $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
        } else {
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
        }

        $(this).width(videoWidth).height(videoHeight);

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');
        

    });
}
.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}

.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .description .inner {
  font-size: 1em;
  width: 45%;
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
  object-fit: cover;
}
.video-container video.fillWidth {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="intro" class="parallax-section">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
    <div class="video-container">
        <div class="title-container">
            <div class="headline">
                	<h1>Welcome to our Company</h1>

            </div>
            <div class="description">
                <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
            </div>
        </div>
        <div class="filter"></div>
        <video autoplay class="fillWidth">
            <source src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_480p.mov" type="video/mp4" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
           <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"  autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
        <div class="poster hidden">
            <img src="images/background.jpg" alt="">
        </div>
    </div>
</div>
<div class="container" id="content">
    <!-- adding this soon -->
    </div>
</section>

关于javascript - 谷歌浏览器播放视频时显示黑边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38065355/

上一篇：javascript - 关闭警告框后 URL 中的问号

下一篇：javascript - 如何让 HTML5 颜色选择器返回颜色名称而不是颜色代码？

相关文章：

javascript - PHP - 为 Ajax Post 的表单数据附加新值

html - 属性文件中带有 Thymeleaf -UTF-8 的 Spring Boot CRUD 应用程序

javascript - public_html 中的两个索引文件

javascript - 将样式表添加到 Express 应用程序

javascript - 未定义为 $ ("inputElement").val()

javascript - 如何将 Spring 表单设置为只读？

javascript - AJAX json 数据的 CSS 格式化

javascript - Dropzone 无法通过 ajax 进行模态显示

html - 根据窗口高度改变div高度

javascript - 如何提取 d3 图表的名义标签

©2024 IT工具网  联系我们