Хтось знає, як змінити розмір відеоплакату 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: 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;
}

Моє рішення поєднує відповіді користувача2428118 та відповідей Veiko Jääger, що дозволяє здійснювати попереднє завантаження, але не вимагаючи окремого прозорого зображення. Натомість ми використовуємо прозоре зображення із закодованим 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 до розміру відео, оскільки мій код використовує "background-size".

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*/
}

Зверніть увагу, що елементи керування відео над нашим зображенням , тому наше зображення не відображається повністю. Якщо ви використовуєте обкладинку з об’єктом, відредагуйте зображення у візуальному додатку як Photoshop та додайте вміст внизу поля.

У мене була подібна проблема, і я просто вирішив це, створивши зображення із таким же співвідношенням сторін, що і моє відео (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>