HTML5 비디오 포스터를 비디오 자체와 같은 크기로 만들기


95

누구든지 동영상 자체의 정확한 크기에 맞도록 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 미디어 스타일을 확신 할 것이다. 자유롭게 선택하세요. trac.webkit.org/browser/trunk/Source/WebCore/css/…
albert

@albert, 감사 poster합니다. 귀하가 보낸 링크에 대한 참조가 없습니다 . " -webkit media style" 와 같이 말하는 내용에 대해 CSS가 어떻게 생겼는지 보여줄 수 있습니까 ? 감사합니다
팀 피터슨

그게 제가 "픽킹"이라는 뜻입니다. 크롬 전용 미디어 스타일입니다. 나는 그들이 선언하고있는 의사 선택자는 말할 것도없고 막연하게 그들에 대해 잘 알고있다. 시작점없이 : 패딩 등으로 선언을 찾아
보겠습니다

답변:


51

이를 위해 CSS 배경 이미지와 함께 투명한 포스터 이미지를 사용할 수 있습니다 ( ). 그러나 배경을 동영상의 높이와 너비에 맞게 늘리려면 절대 위치 <img>태그사용해야합니다 ( ).

하는 것도 가능하다 세트 background-size100% 100% 에서 지원하는 브라우저background-size ( ).


최신 정보

이를 수행하는 더 좋은 방법 object-fit은 @Lars Ericsson이 제안한대로 CSS 속성 을 사용하는 것 입니다.

사용하다

object-fit: cover;

비디오의 종횡비에 맞지 않는 이미지 부분을 표시하지 않으려면

object-fit: fill;

비디오의 종횡비에 맞게 이미지를 늘리려면


-@ user1419007, 귀하의 예제는 배경 이미지를 반복합니다. 이것이 최선의 방법이 아니라고 제안했기 때문에 두 번째 전략을 구현하는 방법을 보여주는 jsfiddle을 제공 하시겠습니까?
팀 피터슨

나는 한 no-repeat배경 이미지를 에드. 다른 해결책에 대해서는 잠시 시간을내어이 문제를 해결하십시오.
user2428118

편집 : 두 번째 제안 된 솔루션에 대한 예제를 추가했습니다.
user2428118

덕분에 z-index동영상을 재생하기 시작할 때 볼 수 있도록 이미지 를 변경하려면 자바 스크립트가 필요 합니다.
tim peterson

2
.. 두 번째 예제는 크롬에서 작동하지 않습니까? 외부 div에 jsfiddle.net/xh8er 와 같은 위치를 지정해야합니다 . 그런 다음 작동합니다.
commonpike 2014 년

88

대상 브라우저에 따라 object-fit 속성으로 이동 하여이 문제를 해결할 수 있습니다.

object-fit: cover;

또는 아마도 fill당신이 찾고있는 것입니다. IE는 아직 고려 중입니다 .


3
이것이 바로 답입니다.
cilphex

1
객체 맞춤 속성 에 대한 링크에 +1을 사용 object-fit: initial했습니다.
FireBrand

"object-fit : fill"이 트릭을했습니다! "object-fit : initial"처럼 (이상하게도 developer.mozilla.org/en-US/docs/Web/CSS/object-fit 의 사양에 "초기"값이 표시되지 않기 때문 입니다 ). "cover"와 "contain"모두 Android 5.1.1에서 Samsung 기본 브라우저에서 재생중인 포스터를 왜곡했습니다. 그리고 IE에 영향을 미치지 않습니다!
plugincontainer

1
객체 맞춤 규칙에 대해 어떤 CSS 선택자를 대상으로 했습니까? 포스터 이미지를 타깃팅 할 수있는 방법이 없기 때문에 video{object-fit: cover;}?
zıəs uɐɟəʇs

@ zıəs uɐɟəʇs 내 CSS에는 ... video [poster] {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.
totallyNotLizards 2015

1
모바일에서 플레이 중 배경 크기를 조정했습니다. 여기에있는 다른 질문 / 답변 (예 : stackoverflow.com/questions/18229974/… )에서 문제는 이미지 중복 (플레이어 CSS 배경 및 비디오 요소 포스터) 인 것 같습니다. 이 수정이 작동했습니다.
plugincontainer

1
흠 ... Chrome에서 작동했지만 기본 Android 브라우저에서 새로운 문제가 발생했습니다. 참조 : stackoverflow.com/questions/39546792/…
plugincontainer

마지막으로 수정 됨
plugincontainer

27

나는 이것을 가지고 놀았고 모든 솔루션을 시도했지만 결국 내가 사용한 솔루션은 Chrome의 Inspector의 제안이었습니다. 이것을 CSS에 추가하면 저에게 효과적이었습니다.

video{
   object-fit: inherit;
}

감사합니다! 이 상단과 하단의 비디오 격차 REMOVE하는 내가 찾던 정확한 수정했다
cpcdev

12

내 솔루션은 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>

이미지 이름이나 전체 경로 여야합니까?

내 삼성의 안드로이드 네이티브 브라우저 (브라우저 이름은 "인터넷")에서 포스터 크기가 조정되었습니다. 이 솔루션은-투명한 gif를 포스터로, "포스터"를 배경으로-해결했지만 이제 포스터가 IE-9, 10 또는 11에서 표시되지 않습니다.
plugincontainer

1
해결책은 투명한 gif와 배경으로 포스터를 버리고 (위의 Lars Ericsson 답변 참조) video [poster] {object-fit : fill}을 사용하는 것이 었습니다. Android 5.1.1에서 Samsung 기본 브라우저의 문제를 해결했습니다. 및 IE는 문제없이 포스터를 표시합니다
plugincontainer

이 접근 방식은 특히 모바일에서 더 좋습니다. 콘텐츠가로드되는 동안 Android에서 발생 object-fit하는의 거친 크기 왜곡을 방지하지 않습니다 poster.
TheLinguist

5

나는이 아이디어를 생각 해냈고 완벽하게 작동합니다. 좋습니다. 기본적으로 디스플레이에서 비디오 첫 번째 프레임을 제거한 다음 포스터의 크기를 비디오 실제 크기로 조정합니다. 그런 다음 치수를 설정하면 이러한 작업 중 하나를 완료했습니다. 그러면 하나만 남습니다. 이제 첫 번째 프레임을 제거하는 유일한 방법은 실제로 포스터를 정의하는 것입니다. 그러나 우리는 비디오에 존재하지 않는 가짜 비디오를 제공 할 것입니다. 이렇게하면 배경이 투명한 빈 화면이 나타납니다. 즉, 부모 div의 배경이 표시됩니다.

사용하기 쉽지만 내 코드가 "background-size"를 사용하기 때문에 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을 살펴보면 이제 비디오 요소뿐만 아니라 비디오의 크기도 정확해야한다는 것을 알게되었습니다. 내 페이지에서 시도했을 때 운이 좋았다고 생각합니다.
Jonathan J

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 속성으로 동영상 자동 재생 기능을 지원합니다.
Lukas Petr

그 속성을 어떻게 지정합니까?
Khom Nazid

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

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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.