Кто-нибудь знает, как изменить размер видео-постера HTML5, чтобы он точно соответствовал размерам самого видео?

вот jsfiddle, который показывает проблему: http://jsfiddle.net/zPacg/7/

вот этот код:

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

Обратите внимание, что оранжевый прямоугольник не масштабируется до красной границы видео.

Кроме того, простое добавление приведенного ниже CSS также не работает, поскольку оно изменяет масштаб видео вместе с плакатом:

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

Для этого вы можете использовать прозрачное изображение плаката в сочетании с фоновым изображением CSS ( пример ); однако, чтобы фон был растянут по высоте и ширине видео, вам нужно будет использовать абсолютно позиционированный <img>тег ( пример ).

Кроме того , можно установить background-sizeв100% 100% в браузерах , которые поддерживаютbackground-size ( например ).

Обновить

Лучший способ сделать это - использовать object-fitсвойство CSS, как предлагает @Lars Ericsson.

Использовать

object-fit: cover;

если вы не хотите отображать те части изображения, которые не соответствуют соотношению сторон видео, и

object-fit: fill;

растянуть изображение, чтобы оно соответствовало соотношению сторон вашего видео

пример

В зависимости от того, на какие браузеры вы нацеливаетесь, вы можете использовать свойство object-fit, чтобы решить эту проблему:

object-fit: cover;

или, может быть, fillэто то, что вы ищете. Все еще рассматривается для IE .

Или вы можете использовать просто preload="none"атрибут, чтобы сделать фон ВИДЕО видимым. И вы можете использовать background-size: cover;здесь.

 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>

Я играл с этим и пробовал все решения, в конечном итоге решение, которое я выбрал, было предложено инспектором Google Chrome. Если вы добавите это в свой CSS, у меня это сработает:

video{
   object-fit: inherit;
}

Мое решение сочетает в себе ответы user2428118 и Вейко Яэгера, что позволяет выполнять предварительную загрузку, но не требует отдельного прозрачного изображения. Вместо этого мы используем прозрачное изображение 1px с кодировкой 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>

Мне в голову пришла эта идея, и она отлично работает. Итак, в основном мы хотим избавиться от первого кадра видео с дисплея, а затем изменить размер плаката до фактического размера видео. Если мы затем установим размеры, мы выполнили одну из этих задач. Тогда остается только один. Итак, единственный известный мне способ избавиться от первого кадра - это создать плакат. Однако мы собираемся сделать видео фальшивым, которого не существует. Это приведет к пустому отображению с прозрачным фоном. Т.е. фон нашего родительского div будет виден.

Простой в использовании, однако он может работать не со всеми веб-браузерами, если вы хотите изменить размер фона div до размера видео, поскольку в моем коде используется «размер фона».

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>

Покрытие

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

Заполнить

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

Обратите внимание, что элементы управления видео находятся над нашим изображением , поэтому изображение не отображается полностью. Если вы используете обложку, подходящую для объекта, отредактируйте свое изображение в визуальном приложении как фотошоп и добавьте нижнее содержимое поля.

У меня была аналогичная проблема, и я просто исправил ее, создав изображение с тем же соотношением сторон, что и мое видео (16: 9). Моя ширина установлена ​​на 100% в теге видео, и теперь изображение (320 x 180) идеально подходит. Надеюсь, это поможет!

Вы можете изменить размер изображения после создания большого пальца

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

Вы можете использовать плакат для показа изображения вместо видео на мобильном устройстве (или устройствах, которые не поддерживают функцию автовоспроизведения видео). Поскольку мобильные устройства не поддерживают функцию автовоспроизведения видео.

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

Теперь вы можете просто стилизовать атрибут постера, который находится внутри тега видео для мобильного устройства, с помощью медиа-запроса.

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

Это сработало

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

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