如何全屏播放视频

问题描述

我正在尝试将此视频全屏显示，它可以在台式机屏幕上显示，而不能在移动屏幕上显示

也是我的css：

.videoHomeContact {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

解决方法

您可以使用JavaScript在全屏模式下将其打开并关闭

      function openFullscreen(elem) { //Parameter is the video element
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome,Safari,Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }

,

这可行吗？

*{
  box-sizing: border-box;
}
.v-header{
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
}

.container{
  max-width:960px;
  padding-left:1rem;
  padding-right:1rem;
  margin:auto;
  text-align:center;
}

.fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.fullscreen-video-wrap video{
  min-height:100vh;
  min-width:100vw;
}

.header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background:#225470;
  opacity:0.85;
}

.header-content{
  z-index:2;
}

.header-content h1{
  font-size:50px;
  margin-bottom:0;
}

.header-content p{
  font-size:1.5rem;
  display:block;
  padding-bottom:2rem;
}

<header class="v-header container">
    <div class="fullscreen-video-wrap">
      <video src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay="" loop="">
    </video>
    </div>
    <div class="header-overlay"></div>
    <div class="header-content text-md-center">
      <h1>Welcome Everyone</h1>
      <p>Lorem ipsum,dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet impedit explicabo? Debitis quasi ullam aperiam!</p>
      <a class="btn">Find Out More</a>
    </div>
  </header>

  <section class="section section-a">
    <div class="container">
      <h2>Section A</h2>
      <p>Lorem ipsum dolor,sit amet consectetur adipisicing elit. Unde,impedit amet minima iste autem cumque et maiores blanditiis doloribus aut dolorum quaerat non est voluptatum,tempore ut dolorem voluptas quod quae accusantium,ex inventore ducimus. Beatae mollitia exercitationem,quam similique,consectetur ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
    </div>
  </section>

  <section class="section section-b">
    <div class="container">
      <h2>Section B</h2>
      <p>Lorem ipsum dolor,consectetur ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
    </div>
  </section>

,

尝试添加视口元标记：

<meta name="viewport" content="width=device-width,initial-scale=1">

此样式为.videoHomeContact

height: 100vh;
width:100vw

vh保留视口高度，vw保留视口宽度