Spraw, aby plakat wideo HTML5 był taki sam rozmiar jak sam film

W zależności od tego, jakie przeglądarki kierujesz, możesz wybrać właściwość object-fit , aby rozwiązać ten problem:

object-fit: cover;

A może fill jest tym, czego szukasz. Wciąż rozważane dla IE .

Lub możesz użyć po prostu preload="none" atrybutu, aby tło wideo było widoczne. I możesz użyć background-size: cover; tutaj.

 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>

Bawiłem się tym i próbowałem wszystkich rozwiązań, ostatecznie rozwiązanie, które wybrałem, było sugestią Inspektora Google Chrome. Jeśli dodasz to do swojego CSS zadziałało dla mnie:

video{
   object-fit: inherit;
}

Moje rozwiązanie łączy w sobie odpowiedzi user2428118 i Veiko Jääger, umożliwiając wstępne ładowanie, ale bez konieczności oddzielnego przezroczystego obrazu. Zamiast tego używamy zakodowanego w base64 przezroczystego obrazu 1px.

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

Wpadłam na ten pomysł i działa idealnie. W porządku, więc w zasadzie chcemy pozbyć się filmów pierwszej klatki z wyświetlacza, a następnie zmienić rozmiar plakatu na rzeczywisty rozmiar filmów. Jeśli następnie ustawimy wymiary, wykonaliśmy jedno z tych zadań. Wtedy zostaje tylko jeden. Więc teraz, jedynym sposobem na pozbycie się pierwszej klatki jest zdefiniowanie plakatu. Jednak damy film sfałszowany, taki, który nie istnieje. Spowoduje to pusty wyświetlacz z tło przezroczyste. Tzn. tło naszego rodzica div będzie widoczne.

Prosty w użyciu, jednak może nie działać ze wszystkimi przeglądarkami internetowymi, jeśli chcesz zmienić rozmiar tła div na rozmiar wideo, ponieważ mój kod używa "background-size".

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);
}

Możesz użyć plakatu do wyświetlania obrazu zamiast wideo na urządzeniu mobilnym (lub urządzeniach, które nie obsługują funkcji automatycznego odtwarzania wideo). Ponieważ urządzenia mobilne nie obsługują funkcji automatycznego odtwarzania wideo.

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

Teraz możesz po prostu stylizować atrybut poster, który znajduje się wewnątrz znacznika wideo dla urządzenia mobilnego za pomocą media-query.

#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;
}
}

Miałem podobny problem i po prostu go naprawiłem, tworząc obraz o tym samym współczynniku proporcji, co mój film (16: 9). Moja szerokość jest ustawiona na 100% na metce wideo i teraz obraz (320 x 180) pasuje idealnie. Mam nadzieję, że to pomoże!

Możesz zmienić rozmiar obrazu po wygenerowaniu kciuka

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

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;

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

Okładka

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

Fill

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

Zauważ, że kontrolki wideo znajdują się nad naszym obrazem, więc nasz obraz nie jest całkowicie pokazany. Jeśli używasz okładki dopasowanej do obiektu, Edytuj obraz w aplikacji wizualnej jako photoshop i dodaj zawartość marginesu dolnego.