Кто-нибудь знает, как изменить размер видео-постера 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
html
attributes
html5-video
Тим Петерсон
источник
источник
poster
отправленную вами ссылку. Можете ли вы показать мне, как выглядит CSS для того, о чем вы говорите, т.е. "-webkit media style
"? спасибоОтветы:
Для этого вы можете использовать прозрачное изображение плаката в сочетании с фоновым изображением CSS ( пример ); однако, чтобы фон был растянут по высоте и ширине видео, вам нужно будет использовать абсолютно позиционированный
<img>
тег ( пример ).Кроме того , можно установить
background-size
в100% 100%
в браузерах , которые поддерживаютbackground-size
( например ).Обновить
Лучший способ сделать это - использовать
object-fit
свойство CSS, как предлагает @Lars Ericsson.Использовать
object-fit: cover;
если вы не хотите отображать те части изображения, которые не соответствуют соотношению сторон видео, и
object-fit: fill;
растянуть изображение, чтобы оно соответствовало соотношению сторон вашего видео
пример
источник
no-repeat
фоновое изображение. Что касается другого решения, дайте мне время разобраться с этим.z-index
изображения, чтобы видео было видно, когда вы начинаете его воспроизводить.В зависимости от того, на какие браузеры вы нацеливаетесь, вы можете использовать свойство object-fit, чтобы решить эту проблему:
object-fit: cover;
или, может быть,
fill
это то, что вы ищете. Все еще рассматривается для IE .источник
object-fit: initial
сделал это за меня.video{object-fit: cover;}
?Или вы можете использовать просто
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 и Вейко Яэгера, что позволяет выполнять предварительную загрузку, но не требует отдельного прозрачного изображения. Вместо этого мы используем прозрачное изображение 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>
источник
object-fit
не предотвращает диких искажений размера,poster
которые происходят на Android, пока контент все еще загружается.Мне в голову пришла эта идея, и она отлично работает. Итак, в основном мы хотим избавиться от первого кадра видео с дисплея, а затем изменить размер плаката до фактического размера видео. Если мы затем установим размеры, мы выполнили одну из этих задач. Тогда остается только один. Итак, единственный известный мне способ избавиться от первого кадра - это создать плакат. Однако мы собираемся сделать видео фальшивым, которого не существует. Это приведет к пустому отображению с прозрачным фоном. Т.е. фон нашего родительского 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); }
источник
<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*/ }
источник
У меня была аналогичная проблема, и я просто исправил ее, создав изображение с тем же соотношением сторон, что и мое видео (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>
источник