「video」の編集履歴（バックアップ）一覧に戻る
video - (2015/06/21 (日) 13:53:17) のソース
<!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>
