Commit 885e6e9

committed

Added day 28 related html file

1 parent b3cd77e commit 885e6e9Copy full SHA for 885e6e9

File tree

+76

-0

lines changed

+76

-0

lines changed

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <title>Video Speed Scrubber</title>`
	`6`	`+ <link rel="stylesheet" href="style.css">`
	`7`	`+</head>`
	`8`	`+<body>`
	`9`	`+`
	`10`	`+ <div class="wrapper">`
	`11`	`+ <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>`
	`12`	`+ <div class="speed">`
	`13`	`+ <div class="speed-bar">×ばつ</div>`
	`14`	`+ </div>`
	`15`	`+ </div>`
	`16`	`+`
	`17`	`+<script>`
	`18`	`+ const speed = document.querySelector('.speed');`
	`19`	`+ const bar = speed.querySelector('.speed-bar');`
	`20`	`+ const video = document.querySelector('.flex');`
	`21`	`+`
	`22`	`+ function handleMove(e) {`
	`23`	`+ const y = e.pageY - this.offsetTop;`
	`24`	`+ const percent = y / this.offsetHeight;`
	`25`	`+ const min = 0.4;`
	`26`	`+ const max = 4;`
	`27`	`+ const height = Math.round(percent * 100) + '%';`
	`28`	`+ const playbackRate = percent * (max - min) + min;`
	`29`	`+ bar.style.height = height;`
	`30`	`+ bar.textContent = playbackRate.toFixed(2) + ×ばつ';`
	`31`	`+ video.playbackRate = playbackRate;`
	`32`	`+ }`
	`33`	`+`
	`34`	`+ speed.addEventListener('mousemove', handleMove);`
	`35`	`+`
	`36`	`+</script>`
	`37`	`+</body>`
	`38`	`+</html>`

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+body {`
	`2`	`+ display:flex;`
	`3`	`+ justify-content: center;`
	`4`	`+ align-items: center;`
	`5`	`+ min-height: 100vh;`
	`6`	`+ background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');`
	`7`	`+ background-size:cover;`
	`8`	`+ font-family: sans-serif;`
	`9`	`+}`
	`10`	`+.wrapper {`
	`11`	`+ width:850px;`
	`12`	`+ display:flex;`
	`13`	`+}`
	`14`	`+video {`
	`15`	`+ box-shadow:0 0 1px 3px rgba(0,0,0,0.1);`
	`16`	`+}`
	`17`	`+`
	`18`	`+.speed {`
	`19`	`+ background:#efefef;`
	`20`	`+ flex:1;`
	`21`	`+ display:flex;`
	`22`	`+ align-items:flex-start;`
	`23`	`+ margin:10px;`
	`24`	`+ border-radius:50px;`
	`25`	`+ box-shadow:0 0 1px 3px rgba(0,0,0,0.1);`
	`26`	`+ overflow: hidden;`
	`27`	`+}`
	`28`	`+.speed-bar {`
	`29`	`+ width:100%;`
	`30`	`+ background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);`
	`31`	`+ text-shadow:1px 1px 0 rgba(0,0,0,0.2);`
	`32`	`+ display: flex;`
	`33`	`+ align-items: center;`
	`34`	`+ justify-content: center;`
	`35`	`+ padding:2px;`
	`36`	`+ color:white;`
	`37`	`+ height:16.3%;`
	`38`	`+}`

Comments

(0)