彩実験室

HTML5にはvideoタグという非常に便利なタグができまして、今までだとflash等でプレイヤーを用意しないと再生できなかった動画がブラウザ上で直接再生できるようになりました。

で、録画したTSファイルは、mp4に自動変換してサーバー上で整理してあるわけですが、コレを直接参照して再生しちゃえと思ってやってみました。

ホームサーバーにApacheとPHPがインストールされている前提で、ディレクトリ構成を
mp4保存dir : /mnt/data/movie
movie.php 保存dir : /usr/local/bin/htdocs/movie

とすると、ln -s /mnt/data/movie /usr/local/bin/htdocs/movie/movie_data を忘れずに、以下のファイルをmovie.phpとして /usr/local/bin/htdocs/movie に保存する。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<?php
$root_dir = "/mnt/data/movie";
$html_dir = "moviedata";
$get_dir = $_GET['d'];
$get_file = $_GET['v'];

if($get_dir != "")
{
  $root_dir = sprintf("%s/%s", $root_dir, $get_dir);
  $html_dir = sprintf("%s/%s", $html_dir, $get_dir);
}

if($get_file != "")
{
  printf("<video width='960' height='540' src='%s/%s' controls onclick='this.play();'></video>"
  , $html_dir, $get_file);
}
else
{
  $dir_list = scandir($root_dir);
  foreach($dir_list as $dir)
  {
    if(substr($dir, -3) == "mp4")
    {
      printf("<a href='movie.php?d=%s&v=%s'>%s</a><br>\n"
      , urlencode($get_dir), urlencode($dir), $dir);
    }
    else if($dir != "." && $dir != "..")
    {
      $to_dir = sprintf("%s/%s", $get_dir, $dir);
      printf("<a href='movie.php?d=%s'>%s</a><br>\n"
      , urlencode($to_dir), $dir);
    }
  }
}
?>
</body></html>

これで、 http://[192.168.1.2 など、サーバーのアドレス]/movie/movie.php (サーバーのIPアドレスは読み替えて)にアクセスすればファイル一覧が出る。

ファイルリスト

ファイルを選択すれば再生開始。自分の机で見るなりベッドで見るなり。iPad(iOS4.2)とAndroid2.2, 2.3で確認済。

もやさま

ファイル一覧のデザインに凝るとか検索付けるとかメニュー付けるとか、そういうのはココまで出来ていれば何でも出来るでしょう。自分はこれでじゅーぶん。

KEYWORD:
iPad iOS Android TS録画ホームサーバー

★Profile

名前: sai
性別: 男
生年: 1976年
自己紹介:
さすらいのガジェット好き。小さくて高性能なもの大好き。思いついたらやってみるのが大事。

お問い合わせ

思いつくままに、色々なことをやってみて、備忘録的に。

まとめindex

最新のトピック

KEYWORDS

ファイルサーバー上のmp4をガジェットでそのまま再生