![](/img/trans.png)
[英]how to make video on portrait remain on its own area and when it will be tilted to horizontal it should go to full screen
[英]how to make video full screen
我想全屏显示吗?
我的旧代码是这样的
<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一样?
您可以通过这种方式激活全屏模式
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文档以获取更多https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
无法使用CSS使视频元素全屏显示。 最好的办法是在<video>
标签中将其设置为width="100%" height = "100%"
。 查看w3学校如果您确实需要全屏显示,则必须使用JavaScript才能从浏览器请求全屏显示。
var video = document.getElementById("myvideo");
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
在您的小提琴视频中,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%;
}
.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%;
}
来自Garconis
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.