HTML5 video posterini videonun tam boyutlarına tam olarak uyacak şekilde yeniden boyutlandırmayı bilen var mı?

sorunu gösteren bir jsfiddle: http://jsfiddle.net/zPacg/7/

işte o 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;
}​

Turuncu dikdörtgenin videonun kırmızı kenarlığına ölçeklenmediğine dikkat edin.

Ayrıca, yalnızca aşağıdaki CSS'yi eklemek, videoyu posterle birlikte yeniden ölçeklendirdiğinden çalışmaz:

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

Bunu başarmak için şeffaf bir poster görüntüsünü bir CSS arka plan görüntüsü ile birlikte kullanabilirsiniz ( örnek ); ancak, bir videonun yüksekliğine ve genişliğine kadar uzatılmış bir arka plana sahip olmak için, mutlak konumlandırılmış bir <img>etiket ( örnek ) kullanmanız gerekir.

Da mümkündür ayarlamak background-sizeiçin100% 100% de destek olduğu tarayıcılardabackground-size ( örneğin ).

Güncelleme

Bunu yapmanın daha iyi bir yolu, object-fitCSS özelliğini @Lars Ericsson'un önerdiği gibi kullanmak olacaktır .

Kullanım

object-fit: cover;

Görüntünün videonun en boy oranına uymayan kısımlarını görüntülemek istemiyorsanız ve

object-fit: fill;

görüntüyü videonuzun en boy oranına uyacak şekilde uzatmak için

Misal

Hangi tarayıcıları hedeflediğinize bağlı olarak, bunu çözmek için object-fit özelliğini kullanabilirsiniz:

object-fit: cover;

veya belki fillde aradığınız şeydir. Hala IE için düşünülüyor .

Veya preload="none"VİDEO arka planını görünür kılmak için özniteliği kullanabilirsiniz . Ve background-size: cover;burada kullanabilirsiniz .

 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>

Bununla uğraşıyordum ve tüm çözümleri denedim, sonunda kullandığım çözüm Google Chrome'un Müfettişinden bir öneriydi. Bunu CSS'nize eklerseniz, benim için çalıştı:

video{
   object-fit: inherit;
}

Çözümüm, user2428118 ve Veiko Jääger'in yanıtlarını birleştirerek, ayrı bir şeffaf görüntü gerektirmeden önceden yüklemeye izin veriyor. Bunun yerine, base64 kodlu 1px şeffaf resim kullanıyoruz.

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

Bu fikir aklıma geldi ve mükemmel çalışıyor. Tamam, temelde videodan ilk kareden kurtulmak ve ardından posteri videoların gerçek boyutuna yeniden boyutlandırmak istiyoruz. Daha sonra boyutları belirlersek, bu görevlerden birini tamamlamış oluruz. O zaman geriye sadece biri kalır. Şimdi, ilk kareden kurtulmanın tek yolu aslında bir poster tanımlamaktır. Ancak, videoya var olmayan sahte bir tane vereceğiz. Bu, arka plan şeffaf olan boş bir ekrana neden olacaktır. Yani ana div'inizin arka planı görünür olacaktır.

Kullanımı basit, ancak kodum "arka plan boyutu" kullandığından div'in arka planının boyutunu videonun boyutuna göre yeniden boyutlandırmak isterseniz tüm web tarayıcılarında çalışmayabilir.

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>

Örtmek

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

Doldur

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

Video kontrollerinin resmimizin üzerinde olduğunu , dolayısıyla resmimizin tam olarak gösterilmediğini unutmayın. Nesne sığdırmalı kapak kullanıyorsanız, görselinizi photoshop olarak görsel bir uygulamada düzenleyin ve alt içerik kenar boşluğu ekleyin.

Benzer bir sorunla karşılaştım ve videomla aynı en boy oranına (16: 9) sahip bir görüntü oluşturarak bu sorunu düzelttim. Genişliğim video etiketinde% 100 olarak ayarlandı ve şimdi resim (320 x 180) mükemmel bir şekilde uyuyor. Umarım yardımcı olur!

Başparmak oluşturduktan sonra görüntü boyutunu yeniden boyutlandırabilirsiniz

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

Mobil cihazda (veya video otomatik oynatma işlevini desteklemeyen cihazlarda) video yerine resim göstermek için posteri kullanabilirsiniz. Çünkü mobil cihazlar video otomatik oynatma işlevini desteklemiyor.

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

Artık, mobil cihaz için video etiketinin içindeki poster niteliğini medya sorgusu aracılığıyla biçimlendirebilirsiniz.

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

Bu çalıştı

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

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