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

Question 1

누구든지 동영상 자체의 정확한 크기에 맞도록 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%;
}

Question 2

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

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

최신 정보

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

사용하다

object-fit: cover;

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

object-fit: fill;

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

예

Question 3

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

object-fit: cover;

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

Question 4

또는 단순히 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>

Question 5

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

video{
   object-fit: inherit;
}

Question 6

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

Question 7

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

Question 8

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

비디오 컨트롤이 이미지 위에 있으므로 이미지가 완전히 표시되지 않습니다. 개체 맞춤 커버를 사용하는 경우 비주얼 앱에서 포토샵으로 이미지를 편집하고 여백 하단 콘텐츠를 추가합니다.