動画サイト的なもの作ってみた

環境

• OS : Ubuntu 22.04
• WebServer : Apache 2.4.58
• CGI : PHP 8.2.12
• HTML : HTML Living Standard

0.設定

/etc/apache2/apache2.conf

        Options Indexes FollowSymLinks
        # AllowOverride None
        AllowOverride All
        Require all granted

.htaccess

AddType application/x-httpd-php .php .html
AddHandler application/x-httpd-php .php .html

php_value memory_limit 1000M
php_value post_max_size 1000M
php_value upload_max_filesize 1200M

1.HTML(UI)

とりあえず外側のHTMLを書いていきます。 index.html

    
        
        
        
    
    
        
どーがさいと
        

        

            
投稿
            

                動画タイトル (14文字まで): 

                動画ファイル : 

                概要欄 (最大5行)

                

                

            
            
*Uploading may take some time for processing.
            
動画リスト
        
        

            
        
    

watch.php

    
        
        
        
    
    
        

        
概要欄
        
        

            
        

    

style.css

video{
    width: 50%;
    @media screen and (max-width: 480px) {
        width: 100%;
    }
}

pre{
    white-space: pre-wrap;
    font-size: x-large;
}

ul{
    display: flex;
    flex-wrap: wrap;
}

2.プログラム

cgi-binフォルダの中に書きます cgi-bin/videoPost.php 動画投稿プログラム

 70){redirectBackPage();}
    else if (strlen($title) > 14) {redirectBackPage();}
    $de_script_ion = str_replace("
", "", $de_script_ion);
    else if (count(explode("/",$de_script_ion)) > 5){return;}
    $filename = "";
    $videoid = "";
    // 動画IDをランダム生成
    while (!file_exists($filename)){
        $videoid = uniqid(rand(), true);
        $filename = "../videos/".$videoid.".mp4";
        if (!file_exists($filename)){
            break;
        }
        continue;
    }
    // 動画リストファイルに[動画ID,タイトル,投稿時間,IPのハッシュ値(ユーザーID的な？)]を書き込み
    $fp = fopen("../videos/videos.csv", 'ab');
    if ($fp){
        if (flock($fp, LOCK_EX)){
            if (fputcsv($fp, [$videoid, str_replace("'", "\"", $title), date("Y/m/d H:i"), hash("fnv1a32", $_SERVER['REMOTE_ADDR']), $de_script_ion]) === FALSE){
                echo '<_script_>alert("File write failed.");';
                exit;
            }
            flock($fp, LOCK_UN);
        }else{
            echo '<_script_>alert("File lock failed.");';
            exit;
        }
    } else {exit;}
    // 動画ファイル書き込み
    $uploaded_path = realpath("../videos/mp4/")."/".$videoid.".mp4";
    $result = move_uploaded_file($_FILES['upload_video']['tmp_name'],$uploaded_path);
    if(!$result){
        echo "Upload Error : ".$_FILES['upload_video']['error'];
        exit;
    }
    // ffmpegでhls形式に変換しよう！(最後に&をつけることによってバックグラウンド実行)
    exec("ffmpeg -i ".$uploaded_path." -b:v 10M -c:a copy -f hls -hls_playlist_type vod -hls_time 10 -g 24 -hls_segment_filename \"".realpath("../videos/hls/")."/".$videoid."%3d.ts\" ".realpath("../videos/hls/")."/".$videoid.".m3u8 2> ".realpath("../logs")."/".$videoid.".log &");
    // 前のページに戻る
    redirectBackPage();

cgi-bin/videoList.php 動画リストプログラム

";}
            foreach ($rows as $row){
                // 動画リスト出力
                $link = "watch?videoid=".$row[0];
                echo "
".$row[2]."|".$row[3]."
".$row[1];
                if(!file_exists("videos/hls/".$row[0].".m3u8") && !file_exists("videos/mp4/".$row[0].".mp4")){echo "(処理中)";}
                echo "
";
            }
            echo "";
            flock($fp, LOCK_UN);
        } else {
            echo '<_script_>alert("File lock failed.");';
        }
    }
    fclose($fp);

cgi-bin/watch.php 動画視聴プログラム

alert("File lock failed.");';
        }
    } else {exit;}

3.UIにも少しプログラムを追加

index.html

watch.php

    
    
    


    

    
概要欄
    

    

        
        
            
            <_script_>
                if(Hls.isSupported()) {
                    var video = document.getElementById('hlsvideo');
                    var hls = new Hls();
                    hls.loadSource("videos/hls/.m3u8");
                    hls.attachMedia(video);
                }
            
        
            
        

4.セットアップ

mkdir videos videos/mp4 videos/hls logs
touch videos/videos.csv
sudo apt install unzip ffmpeg -y

最後に

とりあえずこれで完成かな? 今回のプログラムは完全練習のプログラムなので、いろいろ冗長化かも。