Czy ktoś wie, jak zmienić rozmiar plakatu wideo HTML5, aby pasował dokładnie do wymiarów samego filmu?

tutaj jest jsfiddle, który pokazuje problem: http://jsfiddle.net/zPacg/7/

oto ten kod:

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

Zauważ, że pomarańczowy prostokąt nie jest skalowany do czerwonej krawędzi wideo.

Ponadto samo dodanie poniższego kodu CSS również nie działa, ponieważ przeskalowuje wideo wraz z plakatem:

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

Aby to osiągnąć, możesz użyć przezroczystego obrazu plakatu w połączeniu z obrazem tła CSS ( przykład ); Jednak aby rozciągnąć tło do wysokości i szerokości wideo, musisz użyć <img>tagu pozycjonowanego absolutnie ( przykład ).

Możliwe jest również, aby ustawić background-sizesię100% 100% w przeglądarkach obsługującychbackground-size ( przykład ).

Aktualizacja

Lepszym sposobem na to byłoby użycie object-fitwłaściwości CSS, jak sugeruje @Lars Ericsson.

Posługiwać się

object-fit: cover;

jeśli nie chcesz wyświetlać tych części obrazu, które nie pasują do współczynnika proporcji wideo, i

object-fit: fill;

aby rozciągnąć obraz, aby dopasować go do proporcji filmu

Przykład

W zależności od wybranych przeglądarek możesz skorzystać z właściwości dopasowania do obiektu, aby rozwiązać ten problem:

object-fit: cover;

a może filljest tym, czego szukasz. Wciąż rozważane dla IE .

Lub możesz użyć prostego preload="none"atrybutu, aby tło VIDEO 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 wypróbowałem wszystkie rozwiązania, ostatecznie rozwiązanie, które wybrałem, było sugestią Inspektora Google Chrome. Jeśli dodasz to do swojego CSS, zadziałało to 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 wymagania oddzielnego przezroczystego obrazu. Zamiast tego używamy przezroczystego obrazu 1px zakodowanego algorytmem base64.

<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łem na ten pomysł i działa idealnie. W porządku, więc w zasadzie chcemy pozbyć się najpierw klatki wideo z wyświetlacza, a następnie zmienić rozmiar plakatu na rzeczywisty rozmiar wideo. Jeśli następnie ustawimy wymiary, wykonaliśmy jedno z tych zadań. Wtedy pozostaje tylko jeden. Więc teraz jedynym sposobem na pozbycie się pierwszej klatki jest zdefiniowanie plakatu. Jednak zamierzamy dać wideo sfałszowane, takie, które nie istnieje. Spowoduje to pusty ekran z przezroczystym tłem. To znaczy tło naszego nadrzędnego 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 elementu div na wymiar wideo, ponieważ mój kod używa opcji „rozmiar tła”.

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>

Pokrywa

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

Napełnić

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

Zwróć uwagę, że kontrolki wideo znajdują się nad naszym obrazem , więc nasz obraz nie jest w pełni pokazany. Jeśli używasz okładki dopasowanej do obiektu, edytuj obraz w aplikacji wizualnej jako Photoshop i dodaj zawartość na dole marginesu.

Miałem podobny problem i właśnie go naprawiłem, tworząc obraz o tym samym współczynniku proporcji co mój film (16: 9). Moja szerokość jest ustawiona na 100% w tagu wideo, a 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);

Możesz użyć plakatu, aby wyświetlić obraz zamiast wideo na urządzeniu mobilnym (lub urządzeniach, które nie obsługują funkcji autoodtwarzania wideo). Ponieważ urządzenia mobilne nie obsługują funkcji autoodtwarzania 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 plakatu, który znajduje się w tagu wideo dla urządzenia mobilnego, za pomocą zapytania o media.

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

To zadziałało

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

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