保存した動画を再生させるページを作る必要があって、リンクを押すと指定した秒数から再生するようにしたい、と思ってしまい作ってみました。
2度と作れる気がしないので、備忘ログとして残しておこうと思います。
できあがるページの画面イメージはこんな感じです。何も装飾していないからダサいですが、僕が全能力使って装飾しても、カッコよくなることはありません。とても残念です。。



こちらがHTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保存動画視聴サンプル</title>
</head>
<body>
<header>
<h1>再生位置指定サンプル</h1>
</header>
<h2>◆動画のタイトル</h2>
<div style="background:lavender; display:table; width:100%;">
<div style="display:table-cell; width:560px;">
<video id="video1" width="560" height="315" controls>
<source src="LocalMovie.mp4">
</video>
</div>
<div style="display:table-cell; text-align:left; vertical-align:top;">
<ul>
<li><a href="javascript:playVideo('video1',0);" >00:00:最初からSTART</a></li>
<li><a href="javascript:playVideo('video1',10);">00:10:10秒からSTART</a></li>
<li><a href="javascript:playVideo('video1',20);">00:20:20秒からSTART</a></li>
<li><a href="javascript:playVideo('video1',30);">00:30:30秒からSTART</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
こちらがJavaScriptです。今回はファイル名を「main.js」としてます。
function playVideo(target,start) {
var v = document.getElementById(target);
//再生位置を指定
v.currentTime = start;
//動画を再生
v.play();
}
これを実現するのに、いろんなかたのブログなどを参考にさせてもらったのですが、あまりにいろんなページを見たので、どれが元ネタかわからなくなってしまいました。。見つけたら、リンクを追加します。とりあえず、ありがとうございました。
注意事項としては、videoタグが使えるブラウザーでないと再生されない、はずです。あまり多くは語れません。。
まあ、見栄えはともかく実現できてよかった。
コメント