Подтвердить что ты не робот

Сделайте плакат видео 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%;
}
4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

object-fit: cover;

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

Ответ 3

Или вы можете использовать просто атрибут 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>

Ответ 4

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

video{
   object-fit: inherit;
}

Ответ 5

Мое решение объединяет ответы пользователя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>

Ответ 6

Я придумал эту идею, и она отлично работает. Итак, в основном мы хотим избавиться от первого кадра видео с экрана, а затем изменить размер плаката на фактический размер видео. Если мы затем установим размеры, мы выполнили одну из этих задач. Тогда остается только один. Итак, теперь единственный способ, которым я знаю избавиться от первого кадра, - это фактически определить плакат. Однако мы собираемся дать видео поддельное, которого нет. Это приведет к созданию пустого дисплея с прозрачным фоном. То есть наш родительский фон 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);
}

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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;

Ответ 11

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

Fill 

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

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