Flowplayer 배경 이미지가 나타나지 않습니다.

Question

저는 클라이언트의 사용자 정의 인트라넷에 Flowplayer를 사용하고 CKEditor를 사용하여 페이지의 콘텐츠를 추가합니다. HTML에서 사이트의 HEAD에 액세스 할 수 없기 때문에 인라인 CSS 구문을 사용하고 있습니다.

클라이언트는 재생을 클릭하기 전에 플레이어 영역에 이미지가 나타나도록 요청하고 있습니다. 인라인 CSS 만 사용하여 스플래시 화면이나 포스터를 얻을 수 있습니까?

<p>Here is a new sample video.</p> 
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script> 

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center; background-image:url('http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg');"></div> 
<script> 
    $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", { 
     clip: { 
     url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4', 
     scaling: 'fit', 
     autoPlay: false, 
     autoBuffering: true, 
     provider: 'rtmp' 
     }, 
     plugins: { 
     rtmp: { 
      url: "flowplayer.rtmp-3.2.12.swf", 
      netConnectionUrl: 'rtmp://rtmp01.hddn.com/play' 
     } 
     }, 
     canvas: { 
     backgroundGradient: 'none' 
     } 
    }); 
</script>  

지금까지 시도한 것은 배경 그림을 표시하지 않습니다. 플레이어가 검정색 배경으로로드됩니다. http://jsfiddle.net/GuVbJ/

Answer 1

당신이해야 할 일은 flowplayer div 안에 이미지를 배치하기 만하면됩니다. 그런 다음 Flowplayer는 이미지를 시작 화면으로 사용합니다. 이미지를 클릭하면 비디오가 재생됩니다.

예

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script> 

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center;"> 
    <img src="http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg" alt="Bacon" /> 
</div> 
<script> 
    $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", { 
     clip: { 
      url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4', 
      scaling: 'fit', 
      autoBuffering: true, 
      provider: 'rtmp' 
     }, 
     plugins: { 
      rtmp: { 
       url: "flowplayer.rtmp-3.2.12.swf", 
       netConnectionUrl: 'rtmp://rtmp01.hddn.com/play' 
      } 
     }, 
     canvas: { 
     backgroundGradient: 'none' 
     } 
    }); 
</script> 

flowplayer docs

Answer 2

CSS 만 어려울 것이다, 당신은 JS와 그 위에 사업부를 놓고 플레이에 제거 할 수 있습니다 :

는 여기에 재생 바이올린입니다.