1

クライアントのカスタム イントラネットに 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/

4

3 に答える 3

3

必要なのは、フロープレーヤーの中に画像を配置することだけです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>

jsFiddleを参照してください

スプラッシュ スクリーンの詳細については、flowplayer のドキュメントを参照してください。

于 2013-10-09T12:25:41.427 に答える