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%;
}
css
html
attributes
html5-video
Tim Peterson
źródło
źródło
poster
w przesłanym przez Ciebie łączu. Czy możesz mi pokazać, jak wygląda CSS o czym mówisz, tj. „-webkit media style
”? dziękiOdpowiedzi:
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-size
się100% 100%
w przeglądarkach obsługującychbackground-size
( przykład ).Aktualizacja
Lepszym sposobem na to byłoby użycie
object-fit
wł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
źródło
no-repeat
ed obraz tła. Jeśli chodzi o inne rozwiązanie, daj mi chwilę na rozwiązanie tego problemu.z-index
obrazu tak, aby wideo było widoczne po rozpoczęciu odtwarzania.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
fill
jest tym, czego szukasz. Wciąż rozważane dla IE .źródło
object-fit: initial
zrobiłem to dla mnie.video{object-fit: cover;}
?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>
źródło
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; }
źródło
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>
źródło
object-fit
nie zapobiega dzikim zniekształceniom,poster
które mają miejsce na Androidzie, gdy zawartość wciąż się ładuje.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); }
źródło
<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*/ }
źródło
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!
źródło
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);
źródło
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; } }
źródło
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;
źródło
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; }
źródło
<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>
źródło