In this lab, I followed the instruction from JavaScript30 and recreated the Video Speed Controller activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_42.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_42.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 42</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I wrote <div class="wrapper"></div> to wrap the content of the lab. After that I did <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video> to make the video. Then I typed <div class="speed"><div class="speed-bar">1×</div></div> to create the speed bar. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS I did html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to give the webpage a background color and make the webpage responsive to screen size changes. #heading {text-align: center; font-size: 16px;} to center the heading of the lab. #copyright {font-size: 16px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal; padding-left: 1%; padding-right: 1%;} to change the font of the copyright notice. video {box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);} to give the video a box shadow. .speed {background: #efefef; flex: 1; display: flex; align-items: flex-start; margin: 10px; border-radius: 50px; box-shadow: 0 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;} .speed-bar {width: 100%; background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; padding: 2px; color: white;
height: 16.3%;} to give the speed bar coloring, size, and positioning. For the JavaScript, I did:
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + '%';
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
This JavaScript makes the speed bar function and controls the speed of the video when moving horizontally inside it with the mouse cursor. Knowing how to build a video speed controller is useful to a web designer because it adds user interactions that benefit the site and the user.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_42/Lab_42.html
No comments:
Post a Comment