Können nicht ändern die Farbe, der html5-video schwarze Balken im IE und iOS

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:

Da die native Abmessungen eines Videos sind nicht bekannt, bis der Film
Metadaten Lasten, eine Standard-Höhe und-Breite von 150 x 300 ist reserviert
auf Geräten mit iOS, wenn die Höhe oder Breite ist hier nicht angegeben werden.
Derzeit ist die Standard-Höhe und Breite ändern sich nicht, wenn der Film
Belastungen, [...]

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.

//set height and width to native values
function naturalSize() {
  var myVideo = document.getElementById('theVideo');
  var myContent = document.getElementById('content');
  myVideo.height = myVideo.videoHeight;
  myVideo.width = myVideo.videoWidth;

  //if the video is bigger than the container it'll fit
  ratio = myVideo.videoWidth/myVideo.videoHeight;
  if(parseInt(myContent.offsetWidth,10)<myVideo.videoWidth){
   myVideo.height = myVideo.videoHeight*parseInt(myContent.offsetWidth,10)/myVideo.videoWidth;
     myVideo.width=parseInt(myContent.offsetWidth,10); 
  }
}
//register listener function on metadata load
function myAddListener(){
  var myVideo = document.getElementById('theVideo');
  myVideo.addEventListener('loadedmetadata', naturalSize, false);
}

window.onload = myAddListener();

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 weil naturalSize() 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.

#content{
  background:blue;
  width:50%;
  height:auto;
  text-align:center;
}
video {
  max-width:100%;
  vertical-align:top;
}

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.

InformationsquelleAutor jaicab

1. entfernen Sie den inline-width/height-Attribute. Sie möchten, verwenden Sie CSS, um Steuern Sie Ihr layout!
2. Verwenden Sie die Magische Schlüsselwort 'auto' für Ihre Höhe
3. Stellen Sie sicher, dass auch ein poster mit dem Seitenverhältnis Ihres Videos

Hier ist ein Turnschuh: http://jsfiddle.net/swaEe/13/

video {
    width: 500px;
    min-width: 200px;
    max-width: 100%;
    height: auto;
}

InformationsquelleAutor alexander farkas

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

<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>
    <br />


    <div class="whatever-container" style="width:600px; height:200px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>

.whatever-container {
    position: relative;
}

.video-container {
    position: absolute;
    opacity: 0;
}

.video-container > video {
    position: relative;
    width: 100%;
    height: 100%;
}

/*
 * After the video dimentions have been acquired, its container will have
 * resized and we can adjust its position as necessary.
 */
function adjustVideoContainer() {
    console.log("video metadata loaded");
    var videoContainer = $(this).parent().filter(".video-container");

    if (videoContainer.length === 0) {
        //abort
        console.log(
            "adjustVideoContainer() was called but no it wasn't "+
            "wrapped in an appropriate container"
        );
        return;
    }
    var containerParent = videoContainer.parent();
    var parentWidth     = containerParent.width(),
        parentHeight    = containerParent.height(),
        containerWidth  = videoContainer.width(),
        containerHeight = videoContainer.height();

    if (containerWidth < parentWidth) {
        videoContainer.css(
            "left",
            (parentWidth - containerWidth) / 2
        );
    }

    if (containerHeight < parentHeight) {
        videoContainer.css(
            "top",
            (parentHeight - containerHeight) / 2
        );
    }
    else {
        videoContainer.height("100%");
    }
    videoContainer.css("opacity", 1);

}

$("video").on("loadedmetadata", adjustVideoContainer);

InformationsquelleAutor easuter