Weiß jemand, wie man die Größe des HTML5-Videoplakats so ändert, dass es genau den Abmessungen des Videos selbst entspricht?

Hier ist eine jsfiddle, die das Problem zeigt: http://jsfiddle.net/zPacg/7/

Hier ist dieser Code:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

Beachten Sie, dass das orangefarbene Rechteck nicht auf den roten Rand des Videos skaliert.

Das Hinzufügen des folgenden CSS funktioniert auch nicht, da das Video zusammen mit dem Poster neu skaliert wird:

video[poster]{
height:100%;
width:100%;
}

Sie können ein transparentes Posterbild in Kombination mit einem CSS-Hintergrundbild verwenden, um dies zu erreichen ( Beispiel ). Um einen Hintergrund auf die Höhe und Breite eines Videos zu strecken, müssen Sie jedoch ein absolut positioniertes <img>Tag verwenden ( Beispiel ).

Es ist auch möglich, in Browsern zu setzen background-size, 100% 100%die unterstützenbackground-size ( Beispiel ).

Aktualisieren

Ein besserer Weg, dies zu tun, wäre die Verwendung der object-fitCSS-Eigenschaft, wie @Lars Ericsson vorschlägt.

Verwenden

object-fit: cover;

Wenn Sie nicht die Teile des Bildes anzeigen möchten, die nicht zum Seitenverhältnis des Videos passen, und

object-fit: fill;

um das Bild an das Seitenverhältnis Ihres Videos anzupassen

Beispiel

Abhängig davon, auf welche Browser Sie abzielen, können Sie die Objektanpassungseigenschaft verwenden, um Folgendes zu lösen:

object-fit: cover;

oder vielleicht fillist es das, wonach du suchst. Wird noch für IE in Betracht gezogen .

Oder Sie können einfach das preload="none"Attribut verwenden, um den VIDEO-Hintergrund sichtbar zu machen. Und Sie können background-size: cover;hier verwenden.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Ich habe damit herumgespielt und alle Lösungen ausprobiert. Schließlich war die Lösung, für die ich mich entschieden habe, ein Vorschlag des Inspektors von Google Chrome. Wenn Sie dies zu Ihrem CSS hinzufügen, hat es bei mir funktioniert:

video{
   object-fit: inherit;
}

Meine Lösung kombiniert die Antworten von user2428118 und Veiko Jääger und ermöglicht so das Vorladen, ohne dass ein separates transparentes Bild erforderlich ist. Wir verwenden stattdessen ein Base64-codiertes 1px-transparentes Bild.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Ich bin auf diese Idee gekommen und sie funktioniert perfekt. Okay, im Grunde wollen wir das erste Bild des Videos vom Display entfernen und dann die Größe des Posters auf die tatsächliche Größe des Videos ändern. Wenn wir dann die Dimensionen festlegen, haben wir eine dieser Aufgaben erledigt. Dann bleibt nur noch einer übrig. Die einzige Möglichkeit, den ersten Frame loszuwerden, besteht darin, ein Poster zu definieren. Wir werden dem Video jedoch ein gefälschtes Video geben, das es nicht gibt. Dies führt zu einer leeren Anzeige mit transparentem Hintergrund. Dh der Hintergrund unseres Eltern-Div wird sichtbar sein.

Einfach zu bedienen, funktioniert jedoch möglicherweise nicht mit allen Webbrowsern, wenn Sie die Dimension des Hintergrunds des Div auf die Dimension des Videos ändern möchten, da mein Code "Hintergrundgröße" verwendet.

HTML / HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Startseite

video{
   object-fit: cover; /*to cover all the box*/
}

Füllen

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Beachten Sie, dass sich die Videosteuerelemente über unserem Bild befinden , sodass unser Bild nicht vollständig angezeigt wird. Wenn Sie ein Objekt-Fit-Cover verwenden, bearbeiten Sie Ihr Bild in einer visuellen App als Photoshop und fügen Sie einen Rand am unteren Rand hinzu.

Ich hatte ein ähnliches Problem und habe es einfach behoben, indem ich ein Bild mit dem gleichen Seitenverhältnis wie mein Video (16: 9) erstellt habe. Meine Breite ist auf dem Video-Tag auf 100% eingestellt und jetzt passt das Bild (320 x 180) perfekt. Hoffentlich hilft das!

Sie können die Bildgröße nach dem Generieren des Daumens ändern

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Sie können Poster verwenden, um Bilder anstelle von Videos auf Mobilgeräten anzuzeigen (oder auf Geräten, die die Funktion zur automatischen Wiedergabe von Videos nicht unterstützen). Weil mobile Geräte die Video-Autoplay-Funktionalität nicht unterstützen.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Jetzt können Sie einfach das Posterattribut, das sich im Video-Tag für mobile Geräte befindet, per Medienabfrage formatieren.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

Das hat funktioniert

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

Und das CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>