简体   繁体   English

如何使视频全屏显示

[英]how to make video full screen

i want to make a full screen ? 我想全屏显示吗?

my old code is like this 我的旧代码是这样的

    <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%;
}

and now i want to change the image with video but full screen so i change like this 现在我想用全屏更改视频图像,所以我要这样更改

<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>

how to make it full screen with css because it leave like padding-top when i try to run this code?? 如何使用CSS使它全屏显示,因为当我尝试运行此代码时,它像padding-top一样?

heres my work https://jsfiddle.net/f0Lcdfrt/4/ 这是我的工作https://jsfiddle.net/f0Lcdfrt/4/

You can activating fullscreen mode this way 您可以通过这种方式激活全屏模式

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();
}

see MDN doc for more https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 请参阅MDN文档以获取更多https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

Video elements can't be made full screen with css. 无法使用CSS使视频元素全屏显示。 The best you can do is make it width="100%" height = "100%" in the <video> tag. 最好的办法是在<video>标签中将其设置为width="100%" height = "100%" See w3 schools If you truly need full screen you will have to do javascript to request full screen from the browser. 查看w3学校如果您确实需要全屏显示,则必须使用JavaScript才能从浏览器请求全屏显示。

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

In your fiddle video src is just not correct. 在您的小提琴视频中,src只是不正确。 In your code try to change this: 在您的代码中尝试更改此设置:

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

to this: 对此:

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

Or just add css: 或者只是添加CSS:

video {
    width: 100%;
    height: 100%;
}
.wrapper {
    width:100%;
    height:100vh;
    overflow: hidden;
    background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}

from Garconis 来自Garconis

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM