html5中的静音标题视频

Posted 2023-03-06

【中文标题】html5中的静音标题视频

【英文标题】：muted header video in html5

【发布时间】：2018-02-03 04:32:50

【问题描述】：

我想在标题中添加一个全宽但300px 高度的静音视频。

我面临的问题是当我降低视频的高度时，宽度会自动减小，而我希望宽度是完整的。

这是 html 代码：

<video id="videobcg" preload="auto"
  autoplay="true" loop="loop" muted="muted" volume="0">
  <source src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-content/uploads/2016/03/2016-web-loop-03.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

这是 CSS 部分：

#videobcg  
   position: relative;
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 100%;
   width: 800px;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);

【问题讨论】：

当你改变播放器的比例时，视频应该如何表现？

它应该占据全屏宽度，但有几行高度。 @Huelfe

这意味着你剪掉了视频的一些高度信息，对吧？

是的，这很好@Huelfe

没有-ms-filter 这样的东西。您的视频在 IE 上不会有任何模糊。

【参考方案1】：

我想这就是你想要的。

#videobcg  
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   min-height: 50%;
   min-width: 100%;
   max-width: 100%;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  object-fit: fill;


.video-button
  position:relative;
  z-index:3;
  margin-left:40%;
  margin-top:40%;

<video id="videobcg" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0"> <source
src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-
content/uploads/2016/03/2016-web-loop-03.mp4"
type="video/mp4"> <source src="movie.webm" type="video/webm"> </video>

<div class=video-button>
   <a href="#" class="button">Button</a>
</div>

【讨论】：

这不尊重视频的纵横比。

他不想

我怎样才能在这个视频上添加一个按钮来引导我到页面的其他部分？ @l.g.karolos

【参考方案2】：

你有没有尝试过这样的事情：

#videobcg  
   position: relative;
   top: 0px;
   left: 0px;
   width: 100%;
   min-height: 100%;
   max-width: 800px;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

【讨论】：

不，这不会改变任何事情。