ちょっと時間かかったかな。動画を追加していくごとにPoster画像を手動で作成しないといけないようなので、地道な作業です。この作業のために人を雇っても良いんじゃないかと思うぐらい。Poster画像は動画編集アプリのKdenliveで作成しました。動画を再生させていい位置で画像を書き出すという感じです。
写真と違うやつを使いましたが、抜き出した画像をvideoタグに指定しました。こんな感じです。試しにやったので動画を一個だけ表示させています。そのためのコードも入ってますが気にしないようにお願いしますｗ
PHP
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="動画共有サイトのサンプルサイトです。">
<link rel="stylesheet" href="./resources/css/style.css?v=<?php echo date('YmdHis'); ?>">
<title>動画共有サイト</title>
<script>
function videoStart() {
const video = document.getElementById('video');
video.controls = true;
video.play();
}
</script>
</head>
<body>
<?php
$files = glob('./resources/videos/*.mp4');
$cnt = 0;
?>
<?php foreach($files as $file) { ?>
<video id="video" class="video" src="<?php echo $file; ?>" onclick="videoStart()" poster="./resources/images/<?php echo basename($file, '.mp4'); ?>.png"></video>
<?php
$cnt++;
if($cnt > 0)
break;
}
?>
</body>
</html>Poster画像を設定した動画プレイヤーですね。
再生させるとこんな感じですね。
JavaScriptで処理を記述していますが、なにしろ画像をまだ一枚しか作ってないので比較できてませんが、コントロール画面を表示させると多分重くなるということで、最初は非表示にして動画をクリックしたときにコントロール画面を表示させるという方向性にしたほうが軽くなるのではと推察しております。また今度試すのでそのときにまた結果をブログに書けたらと思います。他の動画サイトでもこういう動きをしてますね。何か理由があってのことだと思いますけど。
ふと思い立ってやっただけなんですけど、また余裕のあるときに検証出来たらなと思います。次回以降ですね！
0件のコメント
コメントはまだありません。最初の一人になりましょう！