Сделайте ВИДЕОПОСТЕР 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%;
}
11 ответов
для этого вы можете использовать прозрачное изображение плаката в сочетании с фоновым изображением CSS (пример); однако, чтобы иметь фон, растянутый на высоту и ширину видео, вам придется используйте абсолютно позиционированный <img>
tag (пример).
это также возможно set background-size
to 100% 100%
на - браузеры, которые поддерживают background-size
(пример).
в зависимости от того, какие браузеры вы нацелены, вы можете пойти на объект-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 и Veiko Jääger, позволяя предварительно загружать, но не требуя отдельного прозрачного изображения. Вместо этого мы используем прозрачное изображение с кодировкой base64 1px.
<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);
}
вы можете использовать плакат для показа изображения вместо видео на мобильном устройстве (или устройствах, которые не поддерживают функцию автозапуска видео). Поскольку мобильные устройства не поддерживают функцию автозапуска видео.
<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>
теперь вы можете просто стилизовать атрибут плаката, который находится внутри тега видео для мобильного устройства через media-query.
#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;
}
}
У меня была аналогичная проблема, и я просто исправил ее, создав изображение с тем же соотношением сторон, что и мое видео (16:9). Моя ширина установлена на 100% на теге видео, и теперь изображение (320 x 180) идеально подходит. Надеюсь, это поможет!
вы можете изменить размер изображения после создания thumb
exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
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 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*/
}
обратите внимание, что видео контроль над нашим изображением, поэтому наше изображение не полностью показано. Если вы используете обложку object-fit, отредактируйте изображение в визуальном приложении как photoshop и добавьте нижнее содержимое поля.