video

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>video要素、audio要素をJavaScriptから操作する サンプル</title>
</head>
<body onLoad="getDuration()">
<video id="video" width="400" height="300">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
</video>
<div style="width:400px; background-color:#333333; color:#ffffff;">
<input type="button" value="再生" onClick="playVideo()">
<input type="button" value="一時停止" onClick="pauseVideo()">
<input type="button" value="↑" onClick="upVolume()">
<input type="button" value="↓" onClick="downVolume()"><br>
現在(秒):<span id="ichi">0</span><br>
全体(秒):<span id="nagasa"></span><br>
<span id="kanryou"></span>
</div>
<script type="text/javascript">
var v = document.getElementById("video");

function getDuration() {
//動画の長さ(秒)を表示
document.getElementById("nagasa").innerHTML = v.duration;
}

function playVideo() {
//再生完了の表示をクリア
document.getElementById("kanryou").innerHTML = "";
//動画を再生
v.play();
//現在の再生位置(秒)を表示
v.addEventListener("timeupdate", function(){
	document.getElementById("ichi").innerHTML = v.currentTime;
}, false);
//再生完了を知らせる
v.addEventListener("ended", function(){
	document.getElementById("kanryou").innerHTML = "動画の再生が完了しました。";
}, false);
}

function pauseVideo() {
//動画を一時停止
v.pause();
}

function upVolume() {
//音量を上げる
v.volume = v.volume + 0.25;
}

function downVolume() {
//音量を下げる
v.volume = v.volume - 0.25;
}
</script>

</body>
</html>
}

}

function downVolume() {
//音量を下げる
v.volume = v.volume - 0.25;
}
</script>

</body>
</html>

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2015年06月21日 13:53