Finished Chapter 15 exercises 1 and 2

Drummingcoder · Drummingcoder · commit 482adcec9870 · 2025-02-16T18:14:16.000Z
diff --git a/ch15exercises1,2.html b/ch15exercises1,2.html
@@ -0,0 +1,70 @@
+<!-- Assumes there is bbb.mp4 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Chapter 15</title>
+</head>
+<body>
+    <div>
+        <button id="playbackController">Play</button>
+        <button id="muteController">Mute</button>
+        <!--Exercise 1-->
+        <p>Volume: </p>
+        <input type="range" id="volume" min="0.0" max="1.0" step="0.1" />
+        <!--Exercise 2-->
+        <br />
+        <p>Seek: </p>
+        <input type="range" id="seek" min="0.0" max="1.0" step="0.1" value="0"/>
+    </div>
+    <video id="bbbVideo">
+        <source src="bbb.mp4" />
+        <source src="bbb.webm" />
+    </video>
+    <script>
+        function pauseHandler(e) {
+            playButton.innerHTML = "Resume";
+        }
+        function playingHandler(e) {
+            playButton.innerHTML = "Pause";
+        }
+        function volumechangeHandler(e) {
+            muteButton.innerHTML = video.muted ? "Unmute" : "Mute";
+        }
+        function playbackClick(e) {
+            video.paused ? video.play() : video.pause();
+        }
+        function muteClick(e) {
+            video.muted = !video.muted;
+        }
+        var video = document.getElementById("bbbVideo");
+        var playButton = document.getElementById("playbackController");
+        var muteButton = document.getElementById("muteController");
+        video.addEventListener("pause", pauseHandler);
+        video.addEventListener("playing", playingHandler);
+        video.addEventListener("volumechange", volumechangeHandler);
+        playButton.addEventListener("click", playbackClick);
+        muteButton.addEventListener("click", muteClick);
+        // Exercise 1
+        var volume = document.getElementById("volume");
+        function changeVolume(e) {
+            video.volume = volume.value;
+        }
+        volume.addEventListener("change", changeVolume);
+        // Exercise 2
+        var seek = document.getElementById("seek");
+        seek.max = video.duration;
+        function updateMax(e) {
+            seek.max = video.duration;
+        }
+        function updateTime(e) {
+            seek.value = video.currentTime;
+        }
+        function changeTime(e) {
+            video.currentTime = seek.value;
+        }
+        seek.addEventListener("change", changeTime);
+        video.addEventListener("durationchange", updateMax);
+        video.addEventListener("timeupdate", updateTime);
+    </script>
+</body>
+</html>
