플래시 폴백에 대한 포스터 이미지가 없습니다.

Question

솔루션없이 "VideoJS"플래시 플레이어 폴백에 대한 포스터 이미지를 설정하는 방법을 묻는 질문이 많이 있습니다. 나는 내가 같은 질문을 할 것이라고 생각했다.

Answer 1

비디오 노드에서 직접 포스터를 가져 오기 위해 video.js를 가져 오는 행운은 없었습니다. 또한 poster을 옵션으로 생성자에 직접 전달합니다.

var videoPlayer = _V_('snippet-video', { 
    autoplay: false, 
    controls: true, 
    preload: 'auto', 
    height: 450, 
    width: 420, 
    poster: 'some/preview/url' 
}) 

플래시 대체물 및 기본 동영상 요소에서 작동합니다.

Answer 2

HTML5 동영상 태그에 포스터 속성을 지정할 수 있으며 재생에 사용 된 기술에 관계없이 Video.js가 처리합니다.

<video id="my_video_1" class="video-js vjs-default-skin" poster="http://videojs.com/img/poster.jpg" controls preload="auto" width="640" height="268" data-setup='{}'> 
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> 
    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'> 
</video> 

당신이 궁금해하는 경우, 무슨에는 Video.js하는 일은 vjs-poster의 클래스 사업부를 생성하고 포스터 속성에 지정된대로의 배경을 설정합니다. 이에 대한 예제는 JSBin에서 확인할 수 있습니다. 플레이어 옵션은 브라우저가 기본적으로 파일을 재생할 수 있는지 여부에 관계없이 먼저 Flash Player를로드하도록 설정됩니다.

Answer 3

나는 똑같은 문제가 있었고, 내 선수가 반응하기를 원했기 때문에 생겼다. 그러므로 비디오 플레이어의 높이와 폭을 자동으로 설정하고 CSS를 다음과 같이 설정해야했습니다. here.

HTML :

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" 
          controls preload="auto" width="auto" height="auto" 
          poster="img/myVideoPoster" 
          data-setup='{"example_option":true}'> 
         <source src="video.mp4" type='video/mp4'/> 
         <source ... /> 
</video> 

CSS :

.video-js { 
    padding-top: 56.26% !important; 
} 

.vjs-fullscreen { 
    padding-top: 0px !important; 
} 

이 포스터 이미지를 표시하지 않은 flashplayer를 제외하고 잘 작동했다. 이 문제를 해결하기 위해 CSS에 포스터 이미지를 적용하기 위해 다음 규칙을 추가해야했습니다.

.vjs-poster { 
    position: absolute; 
    bottom: 0; 
} 

여러분도 도움이되기를 바랍니다.