communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > 基于html5，父级块中添加video，不能全屏播放的问题解决。

基于html5，父级块中添加video，不能全屏播放的问题解决。

高洛峰
Libérer： 2016-10-14 15:03:53
original
2131 Les gens l'ont consulté

使用video标签，视频总不能占满父级全屏，本来预算的10分钟工程，结果卡在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>
Copier après la connexion

代码（body内容）

<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>
Copier après la connexion

我们按照常规给video标签设置：height：100%；width：100%；

结果如下：

左图：(Google Chrome)高度达到100%；而宽度不能达到100%； 右图：(Firefox)高度不能达到100%；而宽度达到100%；

1.jpg


左图：(Safari)高度达到100%；而宽度不能达到100%； 右图：(Opera)高度不能达到100%；而宽度达到100%；

1.jpg

接着小果就尝试使用：

1.使用js获取父级的宽高，赋给video；结果：失败。

2.使用:-webkit-full-screen{}方法，没有起作用。

3.使用兼容...

。。。累趴

之后小果就发现了简单易操作的方法：

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: 45%;   //需要计算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
Copier après la connexion

结果如下：

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

1.jpg

左图：(Safari)                右图：(Opera)

1.jpg

完美解决啊~

那么还有一个问题，padding-bottom的值是怎么得到的呢？

videoH：video的高

videoW：video的宽

videoTiW：父级的width ,使用的是百分比

padBotRes：padding-bottom的值

式子：

padBotRes = (videoH / videoW) * videoTiW


Étiquettes associées：
基于html5，父级块中添加video，不能全屏播放的问题解决。
source：php.cn
Article précédent：Canvas——使用定时器模拟动态加载动画！ Article suivant：html5：canvas
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2309
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2444
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2058
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1944
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2009
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal