Niech plakat wideo HTML5 będzie miał taki sam rozmiar jak sam film


95

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

1
Myślę, że nie można używać „%” w atrybutach; jednak zmiana na 100 nie rozwiązuje problemu. Założę się, że to styl multimedialny z zestawu -webkit. możesz je przeglądać trac.webkit.org/browser/trunk/Source/WebCore/css/…
albert

@albert, dziękuję Nie widzę żadnych odniesień posterw przesłanym przez Ciebie łączu. Czy możesz mi pokazać, jak wygląda CSS o czym mówisz, tj. „ -webkit media style”? dzięki
tim peterson

cóż, to właśnie miałem na myśli mówiąc „zbieranie”; są to style mediów specyficzne dla Chrome; jestem tylko niejasno zaznajomiony z nimi, nie mówiąc już o pseudoselektorach, które deklarują; bez punktu wyjścia: przeszedłbym przez szukanie deklaracji z dopełnieniem itp.
albert

Odpowiedzi:


51

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


- @ user1419007, Twój przykład powtarza obraz tła. Ponieważ sugerujesz, że nie jest to najlepszy sposób, czy mógłbyś przedstawić jsfiddle pokazujące, jak wdrożyć twoją drugą strategię?
tim Peterson

Mam no-repeated obraz tła. Jeśli chodzi o inne rozwiązanie, daj mi chwilę na rozwiązanie tego problemu.
user2428118

Edycja: dodany przykład drugiego proponowanego rozwiązania.
user2428118

dzięki za to, potrzebujemy trochę javascript do zmiany z-indexobrazu tak, aby wideo było widoczne po rozpoczęciu odtwarzania.
tim Peterson

2
.. drugi przykład nie działał w chrome? musisz nadać zewnętrznemu elementowi div pozycję taką jak jsfiddle.net/xh8er ; wtedy to działa.
commonpike

88

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 .


3
To jest zdecydowanie odpowiedź.
cilphex

1
+1 dla linku do właściwości dopasowania obiektu, używając object-fit: initialzrobiłem to dla mnie.
FireBrand

"object-fit: fill" załatwiło sprawę! podobnie jak „object-fit: initial” (co dziwne, ponieważ nie widzę wartości „początkowej” w specyfikacji na developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Zarówno „okładka”, jak i „zawierają” zniekształcały plakat podczas odtwarzania w natywnej przeglądarce firmy Samsung pod systemem Android 5.1.1. I nie ma to wpływu na IE!
plugincontainer

1
Na jaki selektor CSS celowaliście dla reguły dopasowania obiektów? Ponieważ nie ma sposobu na skierowanie obrazu plakatu, zakładam, że użyłeś video{object-fit: cover;}?
zıəs uɐɟəʇs

@ zıəs uɐɟəʇs W moim css to ... wideo [plakat] {object-fit: fill}
plugincontainer

27

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>

2
lepsza odpowiedź. niczego nie psuje, a wstępne ładowanie wideo nie szkodzi twojej stronie, chyba że jest to witryna skupiająca się na wideo. +1.
totalNotLizards

1
Miałem zmianę rozmiaru tła podczas gry na telefonach komórkowych. Z innych pytań / odpowiedzi tutaj (np. Stackoverflow.com/questions/18229974/… ) wydaje się, że problemem jest powielanie obrazów (tło css odtwarzacza i plakat elementu wideo). Ta poprawka zadziałała.
plugincontainer

1
Hmm ... działał w Chrome, ale stworzył nowy problem w natywnej przeglądarce Androida. Zobacz: stackoverflow.com/questions/39546792/…
plugincontainer

Nareszcie naprawione - zobacz odpowiedź Larsa Ericsson'a poniżej
plugincontainer

27

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

Dziękuję Ci! To była dokładna poprawka, której szukałem, aby
USUNĄĆ

12

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>

Czy musi to być tylko nazwa obrazu czy pełna ścieżka?

W natywnej przeglądarce Androida (przeglądarka nazywa się „Internet”) na moim Samsungu rozmiar plakatu zmienił się ... katastrofalnie w grze. To rozwiązanie - przezroczysty gif jako plakat i "plakat" jako tło - rozwiązało to, ALE ... teraz plakat nie wyświetla się w IE-9, 10 lub 11.
plugincontainer

1
Rozwiązaniem było porzucenie przezroczystego gifa i plakatu jako tła i użycie (patrz odpowiedź Larsa Ericsson powyżej) wideo [poster] {object-fit: fill}. Rozwiązany problem z natywną przeglądarką Samsung w systemie Android 5.1.1. a IE wyświetla plakat bez problemów
plugincontainer

Takie podejście jest lepsze zwłaszcza w przypadku telefonów komórkowych. object-fitnie zapobiega dzikim zniekształceniom, posterktóre mają miejsce na Androidzie, gdy zawartość wciąż się ładuje.
TheLinguist

5

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

to sprytne, spróbowałem. To nie jest idealne, ale dotarcie tam ... jsfiddle.net/trpeters1/NJtc9
tim Peterson

Tak, masz rację. Patrząc na twoje jsfiddle, zdaję sobie teraz sprawę, że wymiar wideo musi być również poprawny, a nie tylko element wideo. Myślę, że miałem szczęście, kiedy wypróbowałem to na mojej stronie.
Jonathan J

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


1

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!


1

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

1

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

Właściwie iOS 10+ obsługuje funkcję autoodtwarzania wideo z atrybutem playsinline.
Lukas Petr,

Jak określasz ten atrybut?
Khom Nazid

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

0

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

0
  <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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.