澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-05-04 09:50 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

父级块中添加video,不能全屏播放的问题解决

采纳video标签,录像总无法占满父级全屏,本来预算的10分钟工程,结果卡在video这里了,艰苦的小果,照旧筹算记下来,共勉。。。

依照html伍,父级块中增多video,不能够全屏播放的主题材料解决。,html伍全屏播放

应用video标签,录制总不能占满父级全屏,本来预算的拾分钟工程,结果卡在video这里了,劳累的小果,依旧筹划记下来,共勉。。。

代码(css内容):

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

代码(body内容)
<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>

 

小编们依据平常给video标签设置:height:百分百;width:100%;

结果如下:

左图:(谷歌(Google) Chrome)中度达到百分百;而宽度无法完成百分百;  右图:(Firefox)中度不能够落成百分之百;而宽度达到百分之百;

 

图片 1图片 2

左图:(Safari)中度达到百分之百;而宽度无法落得百分之百;  右图:(Opera)中度不可能达标百分之百;而宽度到达百分之百;

图片 3 图片 4

接着小果就尝试选择:

一.行使js获取父级的宽高,赋给video;结果:退步。

二.使用:-webkit-full-screen{}方法,未有起作用。

③.接纳包容...

。。。累趴

而后小果就开掘了简要易操作的格局:

css代码:(父级中度为0;设置padding-bottom;)

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 44%;   //须要计算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>

结果如下:

左图:(Google Chrome)  右图:(Firefox)

图片 5图片 6

 

左图:(Safari)                右图:(Opera)

图片 7那么还有一个主题素材,padding-bottom的值是怎么获得的啊?

videoH:video的高

videoW:video的宽

videoTiW:父级的width ,使用的是比例

padBotRes:padding-bottom的值

式子:

padBotRes = (videoH / videoW) * videoTiW

小果是通过总计得出的那么些姿势,消除难点的,假诺有标题,应接来交换,padding的性状,有待去收拾( ⊙ o ⊙ )。

就那标准,藤梨姑娘起始

使用video标签,录制总不能够占满父级全屏,本来预算的十分钟工程...

代码(css内容):

<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>

代码(body内容)
<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>

 

咱俩依照平时给video标签设置:height:百分百;width:百分百;

结果如下:

左图:(Google Chrome)中度达到100%;而宽度无法落得百分之百;  右图:(Firefox)高度不能达到规定的标准百分之百;而宽度抵达百分百;

 

图片 8图片 9

左图:(Safari)中度到达百分之百;而宽度无法达到百分之百;  右图:(Opera)中度无法完毕百分之百;而宽度到达百分之百;

图片 10 图片 11

紧接着小果就尝试采纳:

一.选用js获取父级的宽高,赋给video;结果:失利。

2.应用:-webkit-full-screen{}方法,没有起效果。

三.采纳包容...

。。。累趴

其后小果就发掘了归纳易操作的不二诀窍:

css代码:(父级高度为0;设置padding-bottom;)

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:父级块中添加video,不能全屏播放的问题解决

关键词: 澳门威利斯人