php1枚で作る動画ギャラリー＋再生ボタン＋音楽プレイヤー（bootstrapによるbadge採番＋phpページング実装）

Linux サーバにある動画をiPhoneから選択＋再生するphpファイルを作った。

こうなる。

f:id:min117:20200209210138g:plain

「再生」ボタンで動画再生。

f:id:min117:20200209182732p:plain

「別窓再生」を押せば右下の小窓で音声だけループ再生する。

f:id:min117:20200209182742p:plain

動画の番号はbootstrap4のbadge機能で採番する。

min117.hatenablog.com

右上のハンバーガーメニューからは別ページに飛べる。

f:id:min117:20200209182758p:plain f:id:min117:20200209182820p:plain

動画だけで1000近くあるので自動で5ページに分ける（ページング）をphpで実装している。

拡張子がmp4ではないもの（tsやmkv）は「変換」ボタンでmp4に変換（サーバ側でHandBrakeCLIを動かす）したいが、まだ未実装。

f:id:min117:20200209182804p:plain

横画面でも動く。

f:id:min117:20200209210212g:plain

bootstrap4のカード機能を使っているので動画どうしが綺麗に隣り合って横に並ぶ。
f:id:min117:20200209182751p:plain

これを、拡張子.phpのファイル1つで実装する。。htmlとcssを分けたりしない。jsを別ファイルにしたりもしない。ファイル数が増えると可搬性が悪くなるから。できるだけファイル1枚で済ます（ただしbootstrapのcssだけはインポートしている）。

min117.hatenablog.com

ソースはこれ。

f:id:min117:20200209202714p:plain

f:id:min117:20200209202747p:plain

f:id:min117:20200209202821p:plain

f:id:min117:20200209202906p:plain

f:id:min117:20200209203004p:plain

f:id:min117:20200209203037p:plain

f:id:min117:20200209203116p:plain

f:id:min117:20200209203158p:plain

f:id:min117:20200209203246p:plain

f:id:min117:20200209203842p:plain

f:id:min117:20200209203350p:plain

f:id:min117:20200209203427p:plain

コピペ用

?php

//エラーをhtml上に吐く

ini_set( 'display_errors', 1);

//記述上のエンコードを指定

mb_internal_encoding("UTF-8");

//表示上のエンコード指定header

header("Content-Type: text/html; charset=UTF-8");

// 後で呼ぶ関数の中で使う変数を定義

$DATE = date("Ymd_His");

$FILENAME = $DATE;

// print '<font size="6" color="blue">';

// print "実行日時： $FILENAME<br>";

define('SCRIPT_DIR', dirname($_SERVER['SCRIPT_FILENAME']));

// print SCRIPT_DIR;

// GETの中身が入っているか確認

// print $_GET['SORT_FLG'];

$my_sort_flg = '';

if ( isset( $_GET['SORT_FLG'] ) ){

$my_sort_flg = $_GET['SORT_FLG']; // sortがsorgやsoftになっていないか注意

} else {

$my_sort_flg = 'NO';

}

// 動画にoverlayした「別窓再生」ボタンによるmp3再生_$mp3name2

if(isset($_GET['CALLED_MP3'])){

$myCALLED_MP3 = $_GET['CALLED_MP3'];

} else {

// print $_GET['CALLED_MP3'];

// $myRECENT = "myRECENT_NOSET";

$myCALLED_MP3 = 'CALLEDMP3_IS_NONE';

}

$arr=array();

$dir = '.';

dsearch($dir);

function dsearch($dir)

{

global $arr;

$sepa = DIRECTORY_SEPARATOR;

if (!is_dir($dir)) return false;

if (!$dp= opendir($dir)) {

die("開けません");

}

while *1 !== false) { // falseが返らない間ループ

if ($file === '.' || $file === '..') continue; // スキップ

// $file{0} == '.' とすれば、ドットで始まる隠しファイルも読み飛ばせる

// http://php.net/manual/ja/function.is-dir.php

if ($file{0} == '.') continue;

// ディレクトリなら再帰処理

if (is_dir("$dir$sepa$file")) {

continue;

//dsearch("$dir$sepa$file");

} else {

// mp4じゃなければスキップ

$info = new SplFileInfo("$file");

$ext = pathinfo($info->getFilename(), PATHINFO_EXTENSION);

//if ($ext !== 'mp4' && $ext !== 'ts') {

//if ($ext !== 'mp4') continue;

if ($ext !== 'mp4' &&

$ext !== 'MP4' &&

$ext !== 'mov' &&

$ext !== 'MOV' &&

$ext !== 'ts' &&

$ext !== 'TS' &&

$ext !== 'avi' &&

$ext !== 'AVI' &&

$ext !== 'webm' &&

$ext !== 'WEBM' &&

$ext !== 'mkv' &&

$ext !== 'MKV'

) continue;

}

//echo "$dir$sepa$file<br />\n";

$arr = "$dir$sepa$file";

}

// 配列を降順にする

$arr = array_reverse($arr);

closedir($dp);

//var_dump($arr);

}

// ページング実装

// https://web-dev.xyz/php-get-paging/

//print '<div style="z-index: 2000; position: fixed; bottom: 10px; right: 100px; background-color:white; opacity:0.9; width:auto;">';

//print '<div style="z-index: 2001; position: fixed; bottom: 1%; right: 1px; background-color:white; opacity:0.9; text-align:left" class="box_scrollbar_Page">';

$totalPage = count($arr);

// print 'Total：' . $totalPage;

// print '<br>';

$maxPage = 5;

if (isset($_GET["page"]) &&

$_GET["page"] > 0 &&

// $_GET["page"] <= $totalPage) {

$_GET["page"] <= $maxPage) {

$nowPage = (int)$_GET["page"];

} else {

$nowPage = 1;

}

// print '<font color="red">現在ページ：' . "$nowPage" . '</font>';

// print '<br>';

// 300オーバーなら3ページに分ける

// 300オーバーなら5ページに分ける

if ($totalPage > 300) {

// $maxPerPage = round($totalPage / 3);

$maxPerPage = round($totalPage / 5);

$flgPageDevide='YES';

} else {

$maxPerPage = $totalPage;

$flgPageDevide='NO';

}

// 最後のページ

$maxLastPage = $totalPage - ($maxPerPage * 4);

// 前後ページ

$prevPage = $nowPage-1;

$nextPage = $nowPage+1;

if ($flgPageDevide === 'YES') {

<!DOCTYPE html>

<head>

<style>

/* スクロールバーPage */

.box_scrollbar_Page {

overflow:auto;

width:auto;

height:auto; /*ここでメニューの高さを調整する*/

padding:0.5px;

/* border:1px solid #000; */

background-color:#F9F9F9;

color:#000;

font-size:15px;

}

/* スクロールバー */

.box_scrollbar3 {

overflow:auto;

width:310px;

height:auto; /*ここでメニューの高さを調整する*/

padding:0.5px;

/* border:1px solid #000; */

background-color:#F9F9F9;

color:#000;

font-size:15px;

}

</style>

</head>

<!--

画面の幅が一定以上で動き変える-lg

Navbarを上部に固定するには<bodyにpaddingしたあとに fixed-top を入れる

-->

<a href="#" class="navbar-brand">Movs　

<?php

/// Navbarに現在表示中のページのfrom toを表示する

// php でseq()するにはrange()を使う

if ("$nowPage" === "1" ) {

// print '1 - ' . "$maxPerPage";

$pSTART = "1";

$pLAST = "$maxPerPage";

// print '<span class="badge badge-light">1</span>' . ' - ' . '<span class="badge badge-light">' . "$maxPerPage" . '</span>';

} else if ("$nowPage" === "5") {

// print "$maxPerPage"*("$nowPage"-1)-1 . ' - ' . "$totalPage";

// print '<span class="badge badge-light">' . "$maxPerPage"*("$nowPage"-1)-1 . '</span>' . ' - ' . '<span class="badge badge-light">' . "$totalPage" . '</span>';

// print '<span class="badge badge-light">' . "$pSTART" . '</span>' . ' - ' . '<span class="badge badge-light">' . "$totalPage" . '</span>';

// print '<span class="badge badge-light">' . "$pSTART" . '</span>' . ' - ' . '<span class="badge badge-light">' . "$pLAST" . '</span>';

$pSTART = "$maxPerPage"*("$nowPage"-1)-1;

$pLAST = "$totalPage";

} else {

// if ("$nowPage" === "2" ) {

// print '<span class="badge badge-light">' . "$maxPerPage"*("$nowPage"-1)+1 . '</span>' . ' - ' . '<span class="badge badge-light">' . "$maxPerPage"*("$nowPage"-1)+1 . '</span>';

// print "$maxPerPage"*("$nowPage"-1)+1 . ' - ' . "$maxPerPage"*"$nowPage";

$pSTART = "$maxPerPage"*("$nowPage"-1)+1;

$pLAST = "$maxPerPage"*"$nowPage";

}

// Navbarに現在表示中のページを「badge」で表示

print '<span class="badge badge-light">' . "$pSTART" . '</span>' . ' - ' . '<span class="badge badge-light">' . "$pLAST" . '</span>';

</a>

<button class="navbar-toggler" type="button"

data-toggle="collapse"

data-target="#navmenu1"

aria-controls="navmenu1"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<?php

$my_badge = '<span class="badge badge-info">';

// php でseq()するにはrange()を使う

foreach(range(1,5) as $pg) {

// 表示するページに含まれる動画総数を計算

if ("$pg" == 5) {

$having_mov = "$totalPage" - "$maxPerPage"*4;

} else {

$having_mov = "$maxPerPage";

}

// 今いるページのbadgeにcolorを付ける

if ("$pg" === "$nowPage" ) {

print '<a class="nav-item nav-link" href="?page=' . "$pg" . '&SORT_FLG=YES">p' . "$pg" . '<span class="badge badge-warning">' . "$having_mov" . ' movs</a>';

} else {

print '<a class="nav-item nav-link" href="?page=' . "$pg" . '&SORT_FLG=YES">p' . "$pg" . '<span class="badge badge-light">' . "$having_mov" . ' movs</a>';

}

<!--

-->

</ul>

</div>

</nav>

</ul>

<!--

<p><mark>data-toggle="tab"</mark>が<mark>データ属性</mark>

<p>nav-linkのあとのactiveを複数書いちゃうとうまく動かない注意<p>

<p>nav-pillsのあとの<mark>id</mark>を他と<mark>かぶらないように</mark><p>

<p>要素に属性data-toggle="tab"またはdata-toggle="pill"を追加するだけで、JavaScriptを記述する>ことなくタブ切り替えまはたPILL切り替えのナビゲーションを有効にできます。パネルぶぶんは全体をdiv要素で囲ん

で、tab-contentクラスを追加します。各パネルとなる要素には、tab-paneクラスを追加し、<mark>最初に表示するパ

ネルには</mark>activeおよびshowクラスを追加します。パネルをフェードインさせるには、fadeクラスを追加します

。

-->

<style>

th { color: red;}

</style>

<?php

// 更新日sort実装 20191231

// https://pisuke-code.com/php-way-to-sort-files-by-lastmod/

if( $my_sort_flg === 'YES') {

$sort_by_lastmod = function($a, $b) {

return filemtime($b) - filemtime($a);

}; //この末尾のカンマ忘れるな

usort( $arr, $sort_by_lastmod );

}

print '<div class="card-columns">';

//var_dump($arr);

//動画数カウンタ $cnt_mov

$cnt_mov = 0;

foreach ($arr as $i) {

echo " ";

$info2 = new SplFileInfo("$i");

$ext2 = pathinfo($info2->getFilename(), PATHINFO_EXTENSION);

// 動画ファイルのみにする

if ($ext2 !== 'mp4' &&

$ext2 !== 'MP4' &&

$ext2 !== 'mov' &&

$ext2 !== 'MOV' &&

$ext2 !== 'ts' &&

$ext2 !== 'TS' &&

$ext2 !== 'avi' &&

$ext2 !== 'AVI' &&

$ext2 !== 'webm' &&

$ext2 !== 'WEBM' &&

$ext2 !== 'mkv' &&

$ext2 !== 'MKV'

) continue;

// Paging実装

$cnt_mov++;

// print $maxPerPage;

// print $cnt_mov;

// 5ページ目指定なのに、$cnt_movが4ページ目より前の若さならスルー（continue）

if (

$nowPage == 5 && $cnt_mov <= $maxPerPage*4 ||

// 4ページ目指定なのに、$cnt_movが4ページ目より後の年寄りならスルー（continue）

$nowPage == 4 && $cnt_mov > $maxPerPage*4 ||

// 4ページ目指定なのに、$cnt_movが3ページ目より前の若さならスルー（continue）

$nowPage == 4 && $cnt_mov <= $maxPerPage*3 ||

// 3ページ目指定なのに、$cnt_movが3ページ目より後の年寄りならスルー（continue）

$nowPage == 3 && $cnt_mov > $maxPerPage*3 ||

// 3ページ目指定なのに、$cnt_movが2ページ目より前の若さならスルー（continue）

$nowPage == 3 && $cnt_mov <= $maxPerPage*2 ||

// 2ページ目指定なのに、$cnt_movが3ページ目より後の年寄りならスルー（continue）

$nowPage == 2 && $cnt_mov > $maxPerPage*2 ||

// 2ページ目指定なのに、$cnt_movが1ページ目より前の若さならスルー（continue）

$nowPage == 2 && $cnt_mov <= $maxPerPage ||

// 1ページ目指定なのに、$cnt_movが2ページ目より後の年寄りならスルー（continue）

$nowPage == 1 && $cnt_mov > $maxPerPage

) {

// print ' スルーします<br>';

continue;

} // else {

// print ' スルーしません<br>';

// }

//echo "<a href=\"$i\"><img src=\"./thumb_movie_images/$i" . "_01.jpg\" alt=\"$i\" width=\"200\" height=\"auto\">$i</a><br>";

// echo "<a href=\"$i\"><img src=\"./thumb_movie_images/$i" . "_01.jpg\" alt=\"$i\" width=\"200\" height=\"auto\"></a>";

//echo "<a href=\"$i\">$i</a><br>";

//echo "<br>";

// bootstrapでカードにしてみる

// print '<div class="card mb-2 bg-dark text-white text-right" style="max-width: 25rem;">';

print '<div class="card bg-dark text-white text-left text-buttom" style="max-width: 30rem;">';

// print '<img class="card-img-top" src="./thumb_movie_images/' . "$i" . '_01.jpg" alt="' . "$i" . '">';

// print '<a href="' . "$i" .'"><img class="card-img-top" src="./thumb_movie_images/' . "$i" . '_01.jpg" alt="' . "$i" . '"></a>';

// ファイル名にシャープが含まれているとリンクできないのrawurlencode()で対応しようとしたが

// そもそも<form>で自分自身にGETないしPOSTするのでなければ（グローバル変数にファイル名が

// 渡らずに完結するのであれば）つまり<href>でリンクするだけならurlencode()は不要。

// <form>にしてGET_で受けるような、いったんこのphpからファイル名が外に出る場合にはrawurlencode()が必要になる。

print '<a href="' . "$i" .'">';

// print '<img class="card-img-top" src="./thumb_movie_images/' . "$i" . '_01.jpg" alt="' . "$i" . '">';

print '<img class="card-img-top" src="./thumb_movie_images/' . "$i" . '_01.jpg" alt="">';

print '</a>';

// print '<img class="card-img" src="gakki.png"';

// print '<h4 class="card-title">' . "$i" . '</h4>';

//print '<div class="card-body>';

print '<div class="card-img-overlay">';

// print '<p class="card-text">' . basename("$i") . '</p>';

// print '<a href="' . "$i" . '<h6 class="card-text">' . basename("$i") . '</h6>';

// print '<h6 class="card-text">' . basename("$i") . '</h6>';

// $cnt_mov++;

// print '<h4 class="card-title">' . basename("$i") . '</h4>';

if("$ext2" == 'mp4' or "$ext2" == 'MP4') {

// print '<a href="' . "$i" . '" class="btn btn-primary">再生</a>';

// print '<a href="' . "$i" . '" class="btn btn-primary">再生 <span class="badge badge-light">' . '9' . '</span></a>';

// print '<a href="' . "$i" . '" class="btn btn-primary">再生 <span class="badge badge-light">' . "$cnt_mov" . '</span></a>';

// print '<a href="' . "$i" . '" class="btn btn-primary">再生</a><span class="badge badge-light">' . "$cnt_mov" . '</span>';

// print '<a href="' . "$i" . '" class="btn btn-primary">再生</a><br><span class="badge badge-light">' . "$cnt_mov" . '</span>';

// print '<span class="badge badge-light">' . "$cnt_mov" . '</span><a href="' . "$i" . '" class="btn btn-primary">再生</a><br>';

//print '<span class="badge badge-light text-left">' . "$cnt_mov" . '</span><a href="' . "$i" . '" class="btn btn-primary text-right">再生</a><br>';

// print '<a href="' . "$i" . '" class="btn btn-primary"><span class="badge badge-light">' . "$cnt_mov" . '</span> 再生</a>';

print '<a href="' . "$i" . '" class="btn btn-primary" target="_blank"><span class="badge badge-light">' . "$cnt_mov" . '</span> 再生</a>';

} else if("$ext2" == 'mkv' or "$ext2" == 'MKV') {

// print '<a href="' . "$i" . '" class="btn btn-secondary">変換</a>';

print '<a href="' . "$i" . '" class="btn btn-secondary"><span class="badge badge-light">' . "$cnt_mov" . '</span>変換</a>';

} else {

print '<a href="' . "$i" . '" class="btn btn-secondary"><span class="badge badge-light">' . "$cnt_mov" . '</span></a>';

}

// print '<h6 class="card-text text-dark">' . "$timestamp" . '</h6>';

// 音声再生ボタン実装 20190105

$mp3name = "$i" . '.mp3';

if (file_exists("$mp3name")){

// print rawurlencode(basename("$mp3name"));

print '<br>';

// print '<a href="' . rawurlencode(basename("$mp3name")) . '" class="btn btn-warning" target="_blank">音声再生</a>';

// print '<a href="' . "$mp3name" . '" class="btn btn-warning" target="_blank">音声再生</a>';

// HTML5 別窓で音楽再生の実装

print '<form action="galmov03b.php" method="GET">';

print '<input type="hidden" name="CALLED_MP3" value="' . $mp3name . '">';

// print '<input type="hidden" name="CHDIR" value="' . $myCHDIR . '">';

// print '<input type="hidden" name="GREPWORD" value="' . $myGRE . '">';

// print '<input type="hidden" name="MKTYPE" value="goMKMP3" id="ID_MKMP3"/></a>';

print '<input type="hidden" name="SORT_FLG" value="YES" id="ID_MYSORT_FLG"/></a>';

print '<input type="hidden" name="page" value="' . "$nowPage" . '" id="ID_MKpage"/></a>';

print '<input type="submit" value="別窓再生" class="btn btn-warning"/></a>';

print '<br>';

print '</form>';

// print '<a href="./doLSglob.php?CALLED_MP3=' . rawurlencode("$i") . '.mp3&MKSORT=goMKSORT" class="btn btn-warning" target="_blank">別窓再生</a>';

// 再生中のmp3だけ別窓にする 20200208

//if ($myCALLED_MP3 !== 'CALLEDMP3_IS_NONE') {

if(isset($_GET['CALLED_MP3']) && $myCALLED_MP3 == "$mp3name"){

/// opacityの横幅サイズはwidthでも書けるけどscrollbarのときはstyle..cssのとこで規定してる

/// opacityの透明度0.5で薄くなる背景blackにしたらmarqueeの行にある text-warning（黄色文>字）とセットにすること

print '<div style="z-index: 2002; position: fixed; bottom:1px; right: 0px; background-color:black; opacity:0.5; text-align:left" class="box_scrollbar3">';

//print '<div style="z-index: 2003; position: fixed; bottom: 1%; right: 1px; background-color:white; opacity:0.9; text-align:right width:10%">';

print "$my_badge" . "$cnt_mov" . '</span>';

print '<br>';

// print "$i";

// print '<a class="text-light" href="' . "$i" . '"> ' . "$i" . '</a>';

print '<marquee scrolldelay="200"><p class="text-warning">' . "$i" . '</p></marquee>';

print '<br>';

/// HTML5による音声再生コントロールの表示

// print '<audio src="' . rawurlencode("$i") . '" autoplay loop controls preload="none"><p>このブラウザは音声再生に対応していません</p>

// print '<audio src="' . "$i" . '" autoplay loop controls preload="none"><p>このブラウザ

は音声再生に対応していません</p>

// ファイル名の頭の ./ を取り去る

$mp3nameTEMP = explode("/" , "$mp3name");

print '<audio src="' . "$mp3nameTEMP[1]" . '" autoplay loop controls preload="none"><p>こ

のブラウザは音声再生に対応していません</p></audio>';

print '<br>';

// print '<video id="Video1" width="300" height="auto" src="' . "$myDOM" . "$i" . '" controls ><a href="' . "$i" . '">' . "$i" . '</a></p></video>';

print '<video id="Video1" width="300" height="auto" src="' . "$i" . '" controls ><a href="' . "$i" . '">' . "$i" . '</a></p></video>';

print '</div>';

}

///// bedgeの次にファイル名を表示するには「overlay終わり」直前に持ってくる

// 更新日時を表示 20191231

$timestamp = date('Y-m-d H:i:s', filemtime($i));

// print '<h6 class="card-text">' . basename("$i") . '<br>' . "$timestamp" . '</h6>';

print '<h6 class="card-text">' . basename("$i") . '</h6>';

print '<h6 class="card-text text-dark">' . "$timestamp" . '</h6>';

// card-img-overlay終わり

print '</div>';

}

print '</div>';

</div>

<span style="color:orange;">画像検索する単語</span>

<br>

<!--

-->

<br>

<!--

-->

<br>

<!--

-->

</fieldset>

<!--

-->

<br>

<br>

</form>

</div>

<!--

-->

<hr>

</form>

</div>

<span style="color:orange;">ダウンロードURL</span>

<br>

<br>

</div>

</form>

</div>

リンクPILLのコンテンツが入ります

<!--

<font size="3px"><a href="' . "$my_dom" . 'PT3/galpdf01b.php"><img src="./icon_PDF.svg" width="160px" height="auto"></a></font><br><br>'

<font size="3px"><a href="./galmov03b.php?SORT_FLG=YES"><img src="./icon_MP4D.svg" width="50px" height="auto"><br>sort:' . "$my_sort_flg" . '</a></font>'

-->

<br>

</div>

// 単一フォームに複数サブミットを配置して遷移先を切り替える方法

// submitボタン複数をjQueryで切り替える

// https://garafu.blogspot.com/2017/04/one-form-multiple-submit.html

// javascriptのfunction

(function() {

/// 関数

// 「検索」ボタン押下時に呼び出される

var btnKensaku_onclick = function(event) {

// $("#form").attr("action", "./doLSglob.php").submit();

$("#form").attr("action", "./galmov03b.php?SORT_FLG=YES").submit();

};

/// 関数

// 「grep実行」ボタン押下時に呼び出される

var btnGrep_onclick = function(event) {

// $("#form").attr("action", "./doLSglob.php").submit();

$("#form").attr("action", "./doLSglob.php").submit();

};

/// 関数

// 「pi実行」ボタン押下時に呼び出される

var btnPi_onclick = function(event) {

// $("#form").attr("action", "./doMOVSH.php").submit();

$("#form").attr("action", "./galmov03b.php?SORT_FLG=YES").submit();

};

///// main

///// ドキュメント読み込み完了時に呼び出される

var document_onready = function(event) {

// btn-mysearch 押されたら btnGrep_onclick()を実行

$("#btn-mysearch").on("click", btnKensaku_onclick);

// btn-grep 押されたら btnGrep_onclick()を実行

$("#btn-grep").on("click", btnGrep_onclick);

// btn-pi 押されたら btnPi_onclick()を実行

$("#btn-pi").on("click", btnPi_onclick).focus();

};

$(document).ready(document_onready);

})();

// jQuery動作確認

// window.alert('jQuery動作確認');

// window.alert($.fn.jquery);

</script>

</body>

</html>

<hr>

<button class="btn btn-light mr-3" type="button">通常のボタン</button>

<button class="btn btn-sm btn-light" type="button">小さいボタン</button>

<hr>

</div>

</form>

min117.hatenablog.com

*1:$file=readdir($dp

min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

php1枚で作る動画ギャラリー＋再生ボタン＋音楽プレイヤー（bootstrapによるbadge採番＋phpページング実装）