※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

「video」の編集履歴(バックアップ)一覧はこちら

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>