FlowPlayerでMP4を再生する

Ubuntu

FlashアプリのFlowPlayerを使用して、MP4を再生して見ようと思った。最終的にはRTMPを再生する予定だが、その前に単体で動作確認をしておくと言う意味である。

【動作環境】

【パッケージインストール】

apt-get install でUbuntuに以下のパッケージをインストールする。
（ [ ] 内にインストールしたときのバージョンを示した。）

  • apache2 [2.4.7-1ubuntu4.13]

【FlowPlayerダウンロード】

以下のページからFlash版FlowPlayerをダウンロードする。
（今回はバージョン 3.2.18をダウンロードした。）

flash.flowplayer.org

上記ページのFlowplayer distributionセクションのdownloadリンクからダウンロードできる。

※HTML5版FlowPlayerも存在するので注意して欲しい。

【FlowPlayerインストール】

 Apache2のデフォルトのドキュメントルートである /var/www/html ディレクトリにダウンロードしたFlowPlayerを以下のように配置する。

$ tree
.
├── flowplayer
│   ├── LICENSE.txt
│   ├── README.txt
│   ├── example
│   │   ├── index.html
│   │   └── style.css
│   ├── flowplayer-3.2.13.min.js
│   ├── flowplayer-3.2.18.swf
│   ├── flowplayer.controls-3.2.16.swf
└── index.html

2 directories, 8 files

【MP4ファイルの配置】

前述のtree表示内容に記載のexampleディレクトリにMP4ファイルを配置する。
今回は便宜上hoge.mp4を配置したことにする。
※シンボリックリンクは扱えないので注意。

【index.htmlの修正】

前述のtree表示内容に記載のexampleディレクトリに存在するFlash版FlowPlayer付属のindex.htmlを以下のように変更する。

※MP4ファイルの中には再生できないものが存在する。Firefoxで直接MP4ファイルをアクセスしても再生されない場合、そのMP4ファイルがFlowPlayerで対応していない可能性がある。

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- A minimal Flowplayer setup to get you started -->


    <!--
        include flowplayer JavaScript file that does
        Flash embedding and provides the Flowplayer API.
    -->
    <script type="text/javascript" src="../flowplayer-3.2.13.min.js"></script>

    <!-- some minimal styling, can be removed -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- page title -->
    <title>Minimal Flowplayer setup</title>

</head><body>

    <div id="page">

        <h1>Minimal Flowplayer setup</h1>

        <p>View commented source code to get familiar with Flowplayer installation.</p>

        <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
        <a
             href="hoge.mp4"
             style="display:block;width:520px;height:330px"
             id="player">
        </a>

        <!-- this will install flowplayer inside previous A- tag. -->
        <script>
            flowplayer("player", "../flowplayer-3.2.18.swf");
        </script>



        <!--
            after this line is purely informational stuff.
            does not affect on Flowplayer functionality
        -->

        <p>
            If you are running these examples <strong>locally</strong> and not on some webserver you must edit your
            <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">
                Flash security settings</a>.
        </p>

        <p class="less">
            Select "Edit locations" > "Add location" > "Browse for files" and select
            flowplayer-x.x.x.swf you just downloaded.
        </p>


        <h2>Documentation</h2>

        <p>
            <a href="http://flowplayer.org/documentation/installation/index.html">Flowplayer installation</a>
        </p>

        <p>
            <a href="http://flowplayer.org/documentation/configuration/index.html">Flowplayer configuration</a>
        </p>

        <p>
            See this identical page on <a href="http://flowplayer.org/demos/example/index.htm">Flowplayer website</a>
        </p>

    </div>


</body></html>

【ブラウザで再生】

ブラウザで http://サーバーのIPアドレス/flowplayer/example/ にアクセスしてMP4を再生する。