Können nicht ändern die Farbe, der html5-video schwarze Balken im IE und iOS
Ich bin versucht zur Anzeige eines Videos in ein responsive design, so dass die Skalierung Grenzen verschmelzen in den hintergrund.
Ich die Abmessungen des video-element zu variieren, dass innerhalb der angegebenen Grenzen. Als Ergebnis, wenn die video-Wiedergabe füllt nicht die eigentliche html-element, bekomme ich die Polsterung schwarz Balken um mein video.
Wird über die css-background-Eigenschaft war ich in der Lage, ändern Sie die Farbe der Balken angezeigt, in Chrome, FireFox und Opera. Ich kann nicht herausfinden, wie die änderung der Farbe angezeigt, die für Internet Explorer oder iOS (ipad).
Kann mir jemand helfen mit diesem?
fiddle wie gewünscht: http://jsfiddle.net/swaEe/
html:
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
css:
video {
width: 500px;
background: blue;
}
***_ Bearbeiten _***
Dies ist eine bessere Geige: http://jsfiddle.net/swaEe/40/
Das video-playback bleiben sollte vertikal und horizontal zentriert in den Behälter. Ich will, dass die "bars", um transparent zu sein oder die gleiche Farbe wie der container (rot in diesem Fall...).
<div style="width:200px; height:600px; background-color:red;">
<video width="100%" height="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
<video width="100%" height="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
siehe update für Geige. zeigt der Blaue Balken rund um das video in Chrome/FF aber nicht IE. Ich muss blau im IE als auch.
Haben Sie sich überlegt, oder ist es eine option, auf die Verwendung von HTML5-canvas zu Rendern, die video-statt nur mit dem video-element?
Ich habe gesehen, dass getan vorher, aber die Leistung nie scheint sehr gut zu sein.
Ich kenne iOS unterstützt HTML5, aber IE könnte mit einem anderen plugin und vielleicht das plugin HTML5 nicht unterstützt
InformationsquelleAutor user319862 | 2013-07-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie etwa div-Element mit css als hintergrund? [Ich bin nicht vertraut mit iOS, schmeckte auf IE11]
html:
CSS:
jsfiddle: http://jsfiddle.net/c9aHf/1/
Was versuchen Sie zu tun? Sie wollen, setzen Sie videos mit verschiedenen Größen in festen Größe Bereich?
Ich habe ein div, dass mit prozentualen Maßen (wie Breite=30%, height=100%). Das video-element ist dann 100% Breite und 100% Höhe im inneren des Behälters. Die Wiedergabe-Seitenverhältnis ist unwahrscheinlich, dass das Spiel die block-Abmessungen. IE und iOS-show "black bars", wenn Sie hält die Wiedergabe im richtigen Seitenverhältnis anstatt mischen in den hintergrund
InformationsquelleAutor MeNa
Gelöst! Link zu der live-jsbin: http://jsbin.com/AVOZoXu/9
Bearbeiten jsbin Folgen der Erklärung: http://jsbin.com/AVOZoXu/9/edit
Konnte ich nicht testen Sie es auf IE, aber es sollte funktionieren wie ein Charme.
Gibt es ein echtes problem mit iOS. Sie werden nicht in der Lage, um eine Hintergrundfarbe festzulegen, um die Spieler und den Standard-player Größe 150x300 wie Sie sehen können, in Safari Developer Library:
So, was Sie tun müssen, entfernen Sie die schwarzen Balken, ist nicht ändern der Standard-Größe und passen es an die Film Größe, sobald Sie können. Und ja, wir brauchen JavaScript.
Und jetzt bekommen Sie einen video-player Größe des Videos, sobald die meta-Daten geladen wurden.
Da das video keinen schwarzen Balken mehr, ich musste nur, um es als text.
Oh! Und Sie wollte es zu reagieren? Check it out, es spielt keine Rolle, die Breite, die Sie festlegen, um die
#content
weilnaturalSize()
prüft das Verhältnis und die Breite des Containers und setzt eine kleinere Höhe für das video als das original, verhindern, dass die schwarzen Balken erscheinen im original-video der Höhe mit einer Breite kleiner.Die Breite gesteuert wird mit der
max-width:100%;
Eigenschaft, so gibt es keine Notwendigkeit, es manuell ändern.Ich weiß, ich weiß, das video nicht geändert, bis Sie begonnen haben, es zu spielen, aber es ist der nächste, du wirst auf iOS zu tun, was Sie wollen. Wie auch immer, ich denke, es ist eine tolle Lösung, ich hoffe es hilft dir.
Aber die Frage ist: wie Entferne ich die schwarzen Balken egal, Verhältnis (ja, das poster wäre das nicht eine Lösung sein), ich denke, weil es kann variieren von einem video zum anderen. Und da Safari mobile setzt eine Standard-Breite und Höhe für das video-tag, height:auto; wird nicht funktionieren weder.
InformationsquelleAutor jaicab
Ich glaube, ich habe es geschafft, zu einer Lösung zu kommen:
Das problem ist, dass es scheint unmöglich zu sein, zu Stil diese Briefkästen cross-browser. Also der trick wäre dann nicht zu haben, Briefkästen, durch die Skalierung der video-element, um das Seitenverhältnis der video-Datei.
Diese Lösung hat zwei mögliche Nachteile:
müssen Sie wissen, die Abmessungen des video-Datei, und schreiben Sie Sie in
data
-AttributeDer Grund dafür ist, dass der browser nicht wissen, die Abmessungen des video-Datei, bis es angefangen hat zu laden. Die meisten Browser laden ein paar bytes an das video, bevor es gespielt wird, aber nicht alle - einige ältere Versionen von Android warten Sie, bis der Benutzer startet die Wiedergabe des Videos.
Wenn Sie kümmern sich nicht um Android 2.3 zu warten, für die
loadedmetadata
Veranstaltung, um sich videoWidth-und videoHeight-als jaicabs Antwort-macht es ist der richtige Weg.Werfen Sie einen Blick auf diese: laufen fiddle /fiddle-editor
Tun wir im Prinzip drei Dinge:
Können Sie jetzt einfach die hintergrund-Farbe des Containers, und Sie sind fertig.
Getestet hab ich es mit iOS 7 auf iPhone und iPad, Chrome, Firefox und Safari. Keine IE-Tests so weit, da ich momentan nicht meine virtuellen Maschinen praktisch, aber ich sehe keine Probleme hier für die aktuellen IEs.
InformationsquelleAutor janfoeh
Hier ist ein Turnschuh: http://jsfiddle.net/swaEe/13/
Ich bin mir nicht sicher, was Sie zeigen wollen, hier. Sie immer noch mit height="240" wenn Sie es machen will, reagieren Sie einfach verwenden height="auto".
Aktualisiert Geige. Die container Abmessungen werden durch den viewport. Ich habe gezeigt, beiden Fällen (ausgenommen den trivialen Fall, wo die container-Maße entsprechen den Abmessungen). Der video-Wiedergabe muss zentriert zu bleiben, weil es ist, in ein position:fixed overlay, die Schriftrollen mit dem Bildschirm
InformationsquelleAutor alexander farkas
Gelöst ohne JS:
Grundsätzlich in beiden Fällen entfernen sich die Höhe oder Breite-Einstellung für das video (für die dünnen div, entfernte ich die Höhe, und für die kurze, der Breite). Dann zentriert das video-Elemente (horizontale mit display:block und dann die Marge trick, senkrecht mit display:table-cell, und es gibt wahrscheinlich einen besseren Weg, das zu tun).
Huh. Es funktionierte auf dem iPad, die ich hier habe. Zugegeben, das ist ein first-gen-iPad... naja.
Die container Abmessungen waren ein Beispiel von zwei Staaten. Die tatsächlichen Abmessungen werden bestimmt durch die viewport-Abmessungen mit css als Prozentsatz. Also zwei verschiedene Lösungen funktionieren nicht =( denn es ist nicht vorhersehbar, welcher Zustand, wird das video-display.
InformationsquelleAutor Mr. Mayers
Weiß ich, einige Zeit ist bereits vergangen, seit die Frage gestellt wurde, aber ich hatte auch zur Implementierung eines workaround für dieses problem-und teilen möchten.
Das problem war ähnlich wie bei den OP ' s, das video könnte eine beliebige Größe oder das Seitenverhältnis.
Wenn die HTML -
<video>
element enthalten ist, innerhalb einer<div>
die gibt keine Größe, die container passen sich automatisch um das video und es wird nicht schwarz "Polsterung".In diesem wissen können wir nutzen, die
loadedmetadata
Veranstaltung: wir sind eigentlich gar nicht nötig, die video-Dimensionen, für die keine Berechnungen, aber wir müssen warten, bis diese Daten zu laden, so dass die container-Größe. Sobald das passiert ist, können wir passen Sie den container horizontal und/oder vertikal.Hier ist ein Turnschuh getestet im IE11:
http://jsfiddle.net/j6Lnz31y/
Quelle (im Fall der Geige einmal nicht mehr verfügbar):
InformationsquelleAutor easuter