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

Кто-нибудь знает, как изменить размер постера 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%;
}
 albert31 мая 2012 г., 06:51
хорошо, это то, что я имел в виду под «выбором»; это специфичные для Chrome медиа-стили; я только смутно знаком с ними, не говоря уже о псевдоселекторах, которые они декларируют; без начальной точки: я бы прошел поиск объявлений с заполнением и т. д.
 albert31 мая 2012 г., 06:29
Я не думаю, что вы можете использовать & quot;% & quot; в атрибутах; однако изменение его на 100 не решает проблему. я сделаю ставку на свой медиа-стиль. не стесняйтесь пробираться через нихtrac.webkit.org/browser/trunk/Source/WebCore/css/…
 tim peterson31 мая 2012 г., 06:36
@albert, спасибо, я не вижу ссылок наposter в ссылке, которую вы отправили. Можете ли вы показать мне, как выглядит CSS для того, о чем вы говорите, т.е. & quot;-webkit media style& Quot ;? Спасибо

Ответы на вопрос(11)

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

video{
   object-fit: inherit;
}
 29 янв. 2016 г., 21:20
Спасибо! Это было именно то, что я искал, чтобы УДАЛИТЬ видео разрыв сверху и снизу
Решение Вопроса

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

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

 tim peterson01 июн. 2012 г., 18:41
- @ user1419007, ваш пример повторяет фоновое изображение. Поскольку вы предполагаете, что это не лучший способ, не могли бы вы предоставить jsfiddle, демонстрирующий, как реализовать вашу вторую стратегию?
 17 мар. 2014 г., 13:13
.. второй пример не работал в Chrome? вам нужно дать внешнему div позицию какjsfiddle.net/xh8er ; тогда это работает.
 01 июн. 2012 г., 18:49
Изменить: добавлен пример для второго предложенного решения.
 tim peterson01 июн. 2012 г., 18:53
спасибо за это, нам нужен Javascript, чтобы изменитьz-index изображения так, что видео видно, когда вы начинаете его воспроизводить.
 01 июн. 2012 г., 18:43
Я & APOS; веno-repeatредактировать фоновое изображение. Что касается другого решения, дайте мне время разобраться с этим.

preload="none" атрибут, чтобы сделать VIDEO фон видимым. И вы можете использовать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>
 09 нояб. 2015 г., 18:41
лучше ответь. ничего не нарушает, и отсутствие предварительной загрузки видео действительно не повредит вашей странице, если это не видео-ориентированный сайт. +1.
 17 сент. 2016 г., 14:27
Хм ... работал в Chrome, но создал новую проблему в родном браузере Android. Увидеть:stackoverflow.com/questions/39546792/…
 08 мая 2018 г., 18:31
Исправлено наконец - см. Ответ Lars Ericsson ниже
 10 сент. 2016 г., 13:15
У меня было на экране изменение размера фона на мобильных телефонах. Из других вопросов / ответов здесь (например,stackoverflow.com/questions/18229974/…Кажется, проблема заключается в дублировании изображений (фон проигрывателя CSS и постер с видеоэлементом). Это исправление сработало.
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;

Мое решение сочетает в себе ответы user2428118 и Veiko J & xx4; & ger; 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>
 30 авг. 2017 г., 11:33
Это должно быть только имя изображения или полный путь?
 08 мая 2018 г., 18:16
Решением было отказаться от прозрачного GIF и постера в качестве фона и использовать (см. Ответ Lars Ericsson выше) видео [poster] {object-fit: fill}. Решена проблема на родном браузере Samsung под андроид 5.1.1. и IE показывает плакат без проблем
 03 мая 2018 г., 07:03
В родном браузере Android (браузер называется «Интернет») на моем Samsung размер плаката изменился ... катастрофически во время игры. Это решение - прозрачный gif в качестве постера и «постер» в качестве фона - решил, что, НО, .. теперь плакат не отображается в IE-9, 10 или 11.
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Cover

Fill

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

Note that the video controls are over our image, so our image is not completly showed. If you are using object-fit cover, edit your image on a visual app as photoshop and add a margin bottom content.

 31 дек. 2018 г., 23:03
object-fit: cover работает хорошо. Спасибо

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

на какие браузеры вы ориентируетесь, вы можете выбратьОбъект посадки Свойство для решения этого:

object-fit: cover;

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

 08 мая 2018 г., 18:12
& quot; Подгонка объекта: заполнить & quot; сделал трюк! так же как и «подбор объекта: начальный» (странно, потому что я не вижу «начального» значения в спецификации наdeveloper.mozilla.org/en-US/docs/Web/CSS/object-fit). Обе "обложки" и & quot; содержать & quot; передернуло постер в игре в родном браузере Samsung под андроид 5.1.1. И это не влияет на IE!
 17 дек. 2018 г., 15:42
Какой селектор CSS вы выбрали для правила подбора объектов? Поскольку нет способа нацелить изображение плаката, я предполагаю, что вы использовалиvideo{object-fit: cover;}?
 19 апр. 2016 г., 11:38
+1 за ссылку наobject-fit собственность, используяobject-fit: initial сделал это для меня.
 01 мая 2018 г., 13:09
да, это отличное решение
 25 мар. 2016 г., 15:55
Это определенно ответ.

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

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

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

#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;
}
}
 19 окт. 2017 г., 15:25
На самом деле iOS 10+ поддерживает функцию автозапуска видео с атрибутом playsinline.

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

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

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);
}
 15 мар. 2013 г., 15:19
Да, ты прав. Глядя на ваше jsfiddle, я теперь понимаю, что размер видео также должен быть правильным, а не только элемент видео. Я думаю, мне просто повезло, когда я попробовал это на своей странице.
 tim peterson15 мар. 2013 г., 02:16
это умно, я дал ему шанс. Это не идеально, но добраться туда ...jsfiddle.net/trpeters1/NJtc9

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

Ваш ответ на вопрос