Weet iemand hoe je het formaat van de HTML5-videoposter kunt wijzigen zodat deze past bij de exacte afmetingen van de video zelf?
hier is een jsfiddle die het probleem laat zien: http://jsfiddle.net/zPacg/7/
hier is die 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="https://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="https://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
<source src="https://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>
CSS:
video{
border:1px solid red;
}
Merk op dat de oranje rechthoek niet schaalt naar de rode rand van de video.
Bovendien werkt het toevoegen van de onderstaande CSS ook niet omdat de video samen met de poster opnieuw wordt geschaald:
video[poster]{
height:100%;
width:100%;
}
Antwoord 1, autoriteit 100%
Afhankelijk van de browsers die u target, kunt u kiezen voor de object-fiteigenschap om dit op te lossen:
object-fit: cover;
of misschien is fillwat u zoekt. Nog in overweging voor IE.
Antwoord 2, autoriteit 75%
Je kunt hiervoor een transparante posterafbeelding gebruiken in combinatie met een CSS-achtergrondafbeelding (voorbeeld); om een achtergrond uit te rekken tot de hoogte en de breedte van een video, moet je echter een absoluut gepositioneerde <img>tag(voorbeeld).
Het is ook mogelijk om background-sizein te stellen op 100% 100%in browsers die background-sizeondersteunen ( voorbeeld).
Bijwerken
Een betere manier om dit te doen is door de object-fitCSS-eigenschap zoals @Lars Ericsson suggereert.
Gebruik
object-fit: cover;
als je die delen van de afbeelding die niet passen in de beeldverhouding van de video niet wilt weergeven, en
object-fit: fill;
om de afbeelding uit te rekken zodat deze past bij de beeldverhouding van uw video
Antwoord 3, autoriteit 30%
Of je kunt het kenmerk preload="none"gebruiken om de VIDEO-achtergrond zichtbaar te maken. En je kunt hier background-size: cover;gebruiken.
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>
Antwoord 4, autoriteit 29%
Ik speelde hiermee en probeerde alle oplossingen, uiteindelijk was de oplossing die ik koos een suggestie van Google Chrome’s Inspector. Als je dit aan je CSS toevoegt, werkte het voor mij:
video{
object-fit: inherit;
}
Antwoord 5, Autoriteit 13%
My Solution combineert de antwoorden van gebruikers2428118 en Veiko Jääger, zodat het voorbelast is, maar zonder een afzonderlijk transparant beeld te vereisen. We gebruiken in plaats daarvan een base64-gecodeerde 1px-transparante afbeelding.
<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>
Antwoord 6, Autoriteit 7%
Ik kwam met dit idee en het werkt perfect. Oké, dus we willen eigenlijk de video’s van het display van de video’s kwijtraken en vervolgens de grootte van de poster wijzigen naar de daadwerkelijke grootte van de video’s. Als we de dimensies vervolgens instellen hebben we een van deze taken voltooid. Dan blijft er maar één. Dus nu, de enige manier waarop ik weet om het eerste frame kwijt te raken, is om daadwerkelijk een poster te definiëren. We gaan echter de video een vervalst geven, een die niet bestaat. Dit zal resulteren in een leeg display met de achtergrond transparant. D.w.z. De achtergrond van onze ouder DIV is zichtbaar.
Eenvoudig te gebruiken, maar het werkt misschien niet met alle webbrowsers als u de grootte van de dimensie van de achtergrond van de DIV-aan de dimensie van de video wilt wijzigen, omdat mijn code “Achtergrondformaat” gebruikt.
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);
}
Antwoord 7, Autoriteit 7%
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
Sorry, your browser doesn't support embedded videos.
</video>
dekking
video{
object-fit: cover; /*to cover all the box*/
}
vul
video{
object-fit: fill; /*to add black content at top and bottom*/
object-position: 0 -14px; /* to center our image*/
}
Merk op dat de videobedieningen over onze afbeelding staan , dus onze afbeelding is niet helemaal getoond. Als u object-fit dekking gebruikt, bewerk u uw afbeelding op een Visual-app als Photoshop en voeg een marge-bodemgehalte toe.
Antwoord 8
Ik had een soortgelijk probleem en heb het gewoon opgelost door een afbeelding te maken met dezelfde beeldverhouding als mijn video (16: 9). Mijn breedte is ingesteld op 100% op het videotag en nu past de afbeelding (320 x 180) perfect. Hoop dat dat helpt!
Antwoord 9
U kunt de grootte van het beeldformaat wijzigen na het genereren van de duim
exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
Antwoord 10
U kunt poster gebruiken om de afbeelding weer te geven in plaats van video op mobiel apparaat (of apparaten die de video-autoplay-functionaliteit niet ondersteunen). Omdat mobiele apparaten geen video-autoplay-functionaliteit ondersteunen.
<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>
Je kunt nu het posterkenmerk dat zich in de videotag voor mobiele apparaten bevindt, via mediaquery opmaken.
#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;
}
}
Antwoord 11
Geen extra div’s nodig.
HTML:
<video controls width="100%" height="100%" poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
<source src="https://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="https://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
<source src="https://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>
CSS:
video[poster]{ object-fit:cover; } /* or object-fit:fill */
Antwoord 12
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;
Antwoord 13
Dit werkte
<video class="video-box" poster="/" controls>
<source src="some source" type="video/mp4">
</video>
En de CSS
.video-box{
background-image: 'some image';
background-size: cover;
}
Antwoord 14
<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>