Сделайте видео постер HTML5 такого же размера, как и само видео

96

Кто-нибудь знает, как изменить размер видео-постера 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%;
}
Тим Петерсон
источник
1
я не думаю, что вы можете использовать "%" в атрибутах; однако изменение его на 100 не решает проблему. Бьюсь об заклад, это медиа-стиль -webkit. не стесняйтесь пробираться
Альберт
@albert, спасибо, я не вижу ссылок на posterотправленную вами ссылку. Можете ли вы показать мне, как выглядит CSS для того, о чем вы говорите, т.е. " -webkit media style"? спасибо
Тим Петерсон
ну вот что я имел в виду под "сбором"; это медиа-стили, специфичные для Chrome; я лишь смутно знаком с ними, не говоря уже о псевдоселекторах, которые они объявляют; без отправной точки: я буду искать объявления с заполнением и т. д.
Альберт

Ответы:

52

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

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


Обновить

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

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

object-fit: cover;

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

object-fit: fill;

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

пример

user2428118
источник
- @ user1419007, ваш пример повторяет фоновое изображение. Поскольку вы предполагаете, что это не лучший способ, не могли бы вы предоставить jsfiddle, демонстрирующий, как реализовать вашу вторую стратегию?
Тим Петерсон
Я редактировал no-repeatфоновое изображение. Что касается другого решения, дайте мне время разобраться с этим.
user2428118 01
Изменить: добавлен пример для второго предлагаемого решения.
user2428118 01
спасибо за это, нам нужен некоторый javascript для изменения z-indexизображения, чтобы видео было видно, когда вы начинаете его воспроизводить.
Тим Петерсон
2
.. второй пример не работал в хроме? вам нужно задать внешнему div позицию, например, jsfiddle.net/xh8er ; тогда это работает.
commonpike
88

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

object-fit: cover;

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

Ларс Эрикссон
источник
3
Это определенно ответ.
cilphex
1
+1 за ссылку на свойство object-fit , я object-fit: initialсделал это за меня.
FireBrand
"object-fit: fill" сделал свое дело! как и "object-fit: initial" (как ни странно, потому что я не вижу "начального" значения в спецификации на developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). И "cover", и "contain" искажали плакат во время игры в родном браузере Samsung под android 5.1.1. И это не влияет на IE!
plugincontainer 08
1
Какой селектор CSS вы выбрали для правила объектного соответствия? Поскольку нет возможности настроить таргетинг на изображение плаката, я полагаю, вы использовали video{object-fit: cover;}?
zıəs uɐɟəʇs
@ zıəs uɐɟəʇs В моем css это ... видео [плакат] {object-fit: fill}
plugincontainer
27

Или вы можете использовать просто 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>
Вейко Яэгер
источник
2
лучший ответ. ничего не ломает, и отсутствие предварительной загрузки видео на самом деле не повредит вашей странице, если это не видео-ориентированный сайт. +1.
TotalNotLizards 09
1
У меня было изменение размера фона во время игры на мобильных устройствах. Из других вопросов / ответов здесь (например, stackoverflow.com/questions/18229974/… ) кажется, что проблема заключается в дублировании изображений (фон css проигрывателя и плакат видеоэлемента). Это исправление сработало.
plugincontainer
1
Хм ... работал в Chrome, но создал новую проблему в собственном браузере Android. См .: stackoverflow.com/questions/39546792/…
plugincontainer
Наконец-то исправлено - см. Ответ Ларса Эрикссона ниже
plugincontainer
27

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

video{
   object-fit: inherit;
}
Патрик
источник
Спасибо! Это было именно то исправление, которое я искал, чтобы УДАЛИТЬ пробелы в видео сверху и снизу
cpcdev
12

Мое решение сочетает в себе ответы 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>
Джейми Джи
источник
Это должно быть только имя изображения или полный путь?
В родном браузере Android (браузер называется «Интернет») на моем самсунге размер плаката изменился ... катастрофически во время игры. Это решение - прозрачный gif в качестве плаката и «плакат» в качестве фона - решило это, НО ... теперь плакат не отображается в IE-9, 10 или 11.
plugincontainer
1
Решение состояло в том, чтобы отказаться от прозрачного gif и плаката в качестве фона и использовать (см. Ответ Ларса Эрикссона выше) video [poster] {object-fit: fill}. Решена проблема в родном браузере Samsung под android 5.1.1. и IE отображает плакат без проблем
plugincontainer
Этот подход лучше всего подходит для мобильных устройств. object-fitне предотвращает диких искажений размера, posterкоторые происходят на Android, пока контент все еще загружается.
TheLinguist
5

Мне в голову пришла эта идея, и она отлично работает. Итак, в основном мы хотим избавиться от первого кадра видео с дисплея, а затем изменить размер плаката до фактического размера видео. Если мы затем установим размеры, мы выполнили одну из этих задач. Тогда остается только один. Итак, единственный известный мне способ избавиться от первого кадра - это создать плакат. Однако мы собираемся сделать видео фальшивым, которого не существует. Это приведет к пустому отображению с прозрачным фоном. Т.е. фон нашего родительского 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);
}
Джонатан Дж.
источник
это умно, я попробовал. Это не идеально, но добраться туда ... jsfiddle.net/trpeters1/NJtc9
Тим Петерсон
Да, ты прав. Глядя на ваш jsfiddle, я теперь понимаю, что размер видео также должен быть правильным, а не только элемент видео. Думаю, мне просто повезло, когда я попробовал это на своей странице.
Джонатан Дж,
5
<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*/
}

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

Даниэль Эдуардо Дельгадо Диас
источник
1

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

глубокий
источник
1

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

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
Мотилал Сони
источник
1

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

<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;
}
}
гопал шарма
источник
Фактически, iOS 10+ поддерживает функцию автовоспроизведения видео с атрибутом playsinline.
Лукас Петр
Как указать этот атрибут?
Хом Назид
0
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;
Ириначен
источник
0

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

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

И CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}
user2903934
источник
0
  <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>
Аладейн
источник