Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können.-H5-Tutorial-php.cn

Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können.

高洛峰

Freigeben： 2016-10-14 15:03:53

Original

2130 Leute haben es durchsucht

Bei Verwendung des Video-Tags kann das Video nicht immer den gesamten Bildschirm des Elternteils einnehmen. Das ursprünglich geplante 10-Minuten-Projekt blieb im Video hängen, also habe ich immer noch vor, es aufzuschreiben zur gegenseitigen Ermutigung. . .

Code (CSS-Inhalt):

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

Nach dem Login kopieren

Code (Body-Inhalt)

<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>

Nach dem Login kopieren

Wir setzen das Video-Tag wie gewohnt: Höhe: 100 %; Breite: 100 %;

Die Ergebnisse sind wie folgt:

Linkes Bild: (Google Chrome) die Höhe erreicht 100 %; die Breite kann jedoch nicht 100 % erreichen; kann nicht 100 % erreichen; und die Breite erreicht 100 %; Die Breite kann nicht 100 % erreichen. (Opera) Die Höhe kann nicht 100 % erreichen. Dann versucht Xiaoguo:

1. Verwenden Sie js, um die Breite und Höhe des übergeordneten Videos abzurufen: Ergebnis. Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können.

2. Die Verwendung der Methode :-webkit-full-screen{} funktioniert nicht.

3. Verwenden Sie kompatible...

. . . Nachdem er sich hingelegt hatte

, entdeckte Xiaoguo eine einfache und einfache Methode: Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können.

CSS-Code: (Elternhöhe ist 0; Polsterung unten festlegen;)

Die Ergebnisse sind wie folgt:

Linkes Bild: (Google Chrome) Rechtes Bild: (Firefox)

Linkes Bild: (Safari) Rechtes Bild: (Opera)

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

Nach dem Login kopieren

Perfekte Lösung~

Dann gibt es noch eine andere Frage: Wie wird der Wert des Polsterbodens ermittelt?

videoH: Videohöhe

Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können. videoW: Videobreite

videoTiW: übergeordnete Breite, mit Prozentsatz

padBotRes: padding-bottom Der Wert von Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können.

Formel:

padBotRes = (videoH / videoW) * videoTiW