如何全屏制作视频

时间:2016-03-18 20:42:57

标签: jquery html css video

我想制作全屏?

我的旧代码就像这样

    <div id="test"></div>


    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>


with css

#test{
  width: 100%;
  height: 100vh;
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
}

现在我想用视频更改图像但全屏,所以我改变了这个

<div id="video">
  <div class="embed-responsive embed-responsive-16by9">
      <video id="video1">
          <source src="video/inspiration-1.mp4" type="video/mp4">
      </video>
      </div>
</div>

    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

如何使用css使其全屏显示,因为当我尝试运行此代码时它会像padding-top一样留下?

继承人我的工作 https://jsfiddle.net/f0Lcdfrt/4/

4 个答案:

答案 0 :(得分:1)

您可以通过这种方式激活全屏模式

var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

请参阅MDN doc了解更多https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

答案 1 :(得分:1)

视频元素无法使用css全屏显示。您可以做的最好的事情是在width="100%" height = "100%"标记中<video>See w3 schools如果你真的需要全屏,你必须使用javascript从浏览器请求全屏。

var video = document.getElementById("myvideo");
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen();
}

答案 2 :(得分:0)

在你的小提琴视频中,src是不正确的。 在您的代码中尝试更改此:

<div class="embed-responsive embed-responsive-16by9">
  <video id="video1">
      <source src="video/inspiration-1.mp4" type="video/mp4">
  </video>
  </div>

到此:

<video id="video1" class="embed-responsive embed-responsive-16by9">
    <source src="video/inspiration-1.mp4" type="video/mp4">
</video>

或者只是添加css:

video {
    width: 100%;
    height: 100%;
}

答案 3 :(得分:0)

data
来自Garconis的