<div>タグ詳細設定

Flowplayer 3.1.4 <div> タグ設置例【詳細設定】

Flowplayer Download : http://flowplayer.org/download/index.html
元ページ : Blog内に FLV / H.264 動画埋め込み Flowplayer 3 の設定

【ディレクトリ／ファイル構成】

www.hoge.jp┐
　　　　　　├ /flowplayer
　　　　　　│　　├ flowplayer-3.1.4.swf
　　　　　　│　　├ flowplayer.controls-3.1.4.swf
　　　　　　│　　├ flowplayer-3.1.4.min.js
　　　　　　│　　　 (exampleフォルダ内に入ってます)
　　　　　　│
　　　　　　├ /movie
　　　　　　　　　├ hoge.html (動画ページ)
　　　　　　　　　├ splash.jpg (初期表示画像)
　　　　　　　　　├ hoge.mp4 (動画ファイル)

- Ver.3.1.3 より、動画ファイル指定は絶対パス、または flowplayer-3.x.x.swf からの相対パス指定が必要です。
- アスペクト比固定設定で、フルスクリーン時も画角維持
- 標準背景のグラデーションを黒一色に変更（フルスクリーン時の「帯」にも影響します）
- 初期画像の設定（※使用画像にあるコントロールバーはjpeg画像=ダミーです）
- 再生に関する詳細設定
- コントロールバーのボタン表示、色設定などの詳細設定
- blog投稿の場合は「改行変換無し」で投稿、または、Flowplayer設定を改行せず作成が良いと思います。

<head>


<script type="text/javascript" src="/flowplayer/flowplayer-3.1.4.min.js"></script>

</head>


<div style="width:400px;height:324px;" id="hogehoge1">

<img src="splash.jpg" width="400" height="318" />
</div>

<script>
flowplayer(
"hogehoge1",                                /* 上記 id="xxx"と同じものを記入 */
"/flowplayer/flowplayer-3.1.4.swf",         /* flowplayerのURI 相対パスでも可 */
    {
        clip: {
/* 動画ファイルURI (Ver.3.1.3より絶対パスまたはflowplayer-3.x.x.swfからの相対パス指定が必要です) */
            url: '/movie/hoge.mp4',
            autoPlay: true,                 /* 初期画像設定時はautoplayをonにする */
            autoBuffering: false,           /* 自動バッファoff(事前の動画データDL可否) */
            bufferLength: 3,                /* 再生までのバッファ秒数 */
            fadeInSpeed: 5000,              /* フェードインスタート msec単位と書いてあるが…? */
            scaling: 'fit'                  /* アスペクト比固定表示 ※最後はカンマ無し */
        },                                  /* カンマを忘れずに！ */
        canvas: {
            backgroundColor: '#000000',     /* 背景色(全画面時も適用される) */
            backgroundGradient: 'none'      /* 背景グラデーション OFF ※最後はカンマ無し */
        },                                  /* カンマを忘れずに！ */
        plugins: {
            controls: {
                height: 24,                 /* メニューの高さ標準24px */
                play:true,                  /* プレイボタン表示 */
                stop:true,                  /* ストップボタン表示 */
                volume:true,                /* 音量調節表示 */
                mute:true,                  /* ミュート可否 */
                time:true,                  /* 再生時間表示 */
                fullscreen:true,            /* フルスクリーンボタン表示 */

        /* 以下、flowplayerサイトにてメニュー配色設定が可能です */
        /* http://flowplayer.org/documentation/skinning/controlbar.html */
                volumeSliderColor: '#000000',
                tooltipColor: '#5F747C',
                progressColor: '#112233',
                bufferColor: '#445566',
                buttonColor: '#5F747C',
                sliderColor: '#000000',
                backgroundGradient: 'high',
                durationColor: '#ffffff',
                backgroundColor: '#222222',
                progressGradient: 'medium',
                borderRadius: '0',
                buttonOverColor: '#728B94',
                bufferGradient: 'none',
                timeBgColor: '#555555',
                sliderGradient: 'none',
                volumeSliderGradient: 'none',
                tooltipTextColor: '#ffffff',
                timeColor: '#01DAFF'         /* 最後はカンマ無し */
            }
        }                                    /* 最後はカンマ無し */
    }
);
</script>

Flowplayer 3.1.4 <div> タグ設置例 【詳細設定】

Flowplayer 3.1.4 <div> タグ設置例【詳細設定】