動画を指定した時間から再生させるHTMLとJavaScript

保存した動画を再生させるページを作る必要があって、リンクを押すと指定した秒数から再生するようにしたい、と思ってしまい作ってみました。

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タグが使えるブラウザーでないと再生されない、はずです。あまり多くは語れません。。

まあ、見栄えはともかく実現できてよかった。