강연욱 / myYoutube

Go to a project
Toggle navigation Toggle navigation pinning
Flare-k
c68147d5 1 parent d3be3691

[Modified] Volume

Inline Side-by-side
Showing 5 changed files with 155 additions and 5 deletions
...@@ -2,6 +2,10 @@ const videoContainer = document.getElementById("jsVideoPlayer"); ...@@ -2,6 +2,10 @@ const videoContainer = document.getElementById("jsVideoPlayer");
2 const videoPlayer = document.querySelector("#jsVideoPlayer video"); 2 const videoPlayer = document.querySelector("#jsVideoPlayer video");
3 const playBtn = document.getElementById("jsPlayButton"); 3 const playBtn = document.getElementById("jsPlayButton");
4 const volumeBtn = document.getElementById("jsVolumeBtn"); 4 const volumeBtn = document.getElementById("jsVolumeBtn");
5 +const fullScrnBtn = document.getElementById("jsFullScreen");
6 +const currentTime = document.getElementById("currentTime");
7 +const totalTime = document.getElementById("totalTime");
8 +const volumeRange = document.getElementById("jsVolume");
5 9
6 // video element MDN 10 // video element MDN
7 // using MDN (Mozila Developer Networks) 11 // using MDN (Mozila Developer Networks)
...@@ -18,14 +22,99 @@ function handleVolumeClick() { ...@@ -18,14 +22,99 @@ function handleVolumeClick() {
18 if (videoPlayer.muted) { 22 if (videoPlayer.muted) {
19 videoPlayer.muted = false; 23 videoPlayer.muted = false;
20 volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>'; 24 volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
25 + volumeRange.value = videoPlayer.volume;
21 } else { 26 } else {
27 + volumeRange.value = 0;
22 videoPlayer.muted = true; 28 videoPlayer.muted = true;
23 volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>'; 29 volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
24 } 30 }
25 } 31 }
32 +
33 +function exitFullScreen() {
34 + fullScrnBtn.innerHTML = '<i class="fas fa-expand"></i>';
35 + fullScrnBtn.removeEventListener("click", exitFullScreen);
36 + fullScrnBtn.addEventListener("click", goFullScreen);
37 +
38 + if (document.exitFullscreen) {
39 + document.exitFullscreen();
40 + } else if (document.mozCancelFullScreen) {
41 + document.mozCancelFullScreen();
42 + } else if (document.webkitExitFullscreen) {
43 + document.webkitExitFullscreen();
44 + } else if (document.mxExitFullscreen) {
45 + document.mxExitFullscreen();
46 + }
47 +}
48 +
49 +function goFullScreen() {
50 + if (videoContainer.requestFullscreen) {
51 + videoContainer.requestFullscreen();
52 + } else if (videoContainer.mozRequestFullScreen) {
53 + videoContainer.mozRequestFullScreen();
54 + } else if (videoContainer.webkitRequestFullscreen) {
55 + videoContainer.webkitRequestFullscreen();
56 + } else if (videoContainer.msRequestFullscreen) {
57 + videoContainer.msRequestFullscreen();
58 + }
59 +
60 + fullScrnBtn.innerHTML = '<i class="fas fa-compress"></i>';
61 + fullScrnBtn.removeEventListener("click", goFullScreen);
62 + fullScrnBtn.addEventListener("click", exitFullScreen);
63 +}
64 +const formatDate = (seconds) => {
65 + const secondsNumber = parseInt(seconds, 10);
66 + let hours = Math.floor(secondsNumber / 3600);
67 + let minutes = Math.floor((secondsNumber - hours * 3600) / 60);
68 + let totalSeconds = secondsNumber - hours * 3600 - minutes * 60;
69 +
70 + if (hours < 10) {
71 + hours = `0${hours}`;
72 + }
73 + if (minutes < 10) {
74 + minutes = `0${minutes}`;
75 + }
76 + if (totalSeconds < 10) {
77 + totalSeconds = `0${totalSeconds}`;
78 + }
79 + return `${hours}:${minutes}:${totalSeconds}`;
80 +};
81 +
82 +function getCurrentTime() {
83 + currentTime.innerHTML = formatDate(Math.floor(videoPlayer.currentTime));
84 +}
85 +function setTotalTime() {
86 + const totalTimeString = formatDate(videoPlayer.duration);
87 + totalTime.innerHTML = totalTimeString;
88 + setInterval(getCurrentTime, 1000);
89 +}
90 +
91 +// 영상이 끝나면 pause하고 다시 앞으로 돌릴 수 있게 하고 싶다...
92 +function handleEnded() {
93 + videoPlayer.currentTime = 0;
94 + playBtn.innerHTML = '<i class="fas fa-play"></i>';
95 +}
96 +function handleDrag(event) {
97 + const {
98 + target: { value },
99 + } = event;
100 + videoPlayer.volume = value;
101 + if (value >= 0.6) {
102 + volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
103 + } else if (value >= 0.2) {
104 + volumeBtn.innerHTML = '<i class="fas fa-volume-down"></i>';
105 + } else {
106 + volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
107 + }
108 +}
109 +
26 function init() { 110 function init() {
111 + videoPlayer.volume = 0.5;
27 playBtn.addEventListener("click", handlePlayClick); 112 playBtn.addEventListener("click", handlePlayClick);
28 volumeBtn.addEventListener("click", handleVolumeClick); 113 volumeBtn.addEventListener("click", handleVolumeClick);
114 + fullScrnBtn.addEventListener("click", goFullScreen);
115 + videoPlayer.addEventListener("loadedmetadata", setTotalTime);
116 + videoPlayer.addEventListener("ended", handleEnded);
117 + volumeRange.addEventListener("input", handleDrag);
29 } 118 }
30 119
31 if (videoContainer) { 120 if (videoContainer) {
......
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
5 opacity: 1; 5 opacity: 1;
6 } 6 }
7 } 7 }
8 +
8 video { 9 video {
10 + width: 100%;
9 max-width: 100%; 11 max-width: 100%;
10 } 12 }
11 .videoPlayer__controls { 13 .videoPlayer__controls {
...@@ -24,10 +26,37 @@ ...@@ -24,10 +26,37 @@
24 .videoPlayer__column:first-child { 26 .videoPlayer__column:first-child {
25 display: flex; 27 display: flex;
26 align-items: center; 28 align-items: center;
27 - span:first-child { 29 + #jsVolumeBtn {
28 margin-right: 10px; 30 margin-right: 10px;
29 } 31 }
30 } 32 }
33 + .videoPlayer__volume {
34 + position: absolute;
35 + padding: 0;
36 + opacity: 1;
37 + top: -60px;
38 + left: -25px;
39 + transform: rotate(-90deg);
40 + z-index: 10;
41 + width: 80px;
42 + cursor: pointer;
43 + input {
44 + background-color: rgba(0, 0, 0, 0.7);
45 + &::-webkit-slider-runnable-track {
46 + background-color: $grey;
47 + height: 5px;
48 + }
49 + &::-webkit-slider-thumb {
50 + all: unset;
51 + background-color: $red;
52 + height: 15px;
53 + width: 15px;
54 + border-radius: 50%;
55 + position: relative;
56 + top: -5px;
57 + }
58 + }
59 + }
31 .videoPlayer__column:last-child { 60 .videoPlayer__column:last-child {
32 justify-self: end; 61 justify-self: end;
33 } 62 }
......
...@@ -105,7 +105,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scs ...@@ -105,7 +105,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scs
105 /*! no static exports found */ 105 /*! no static exports found */
106 /***/ (function(module, exports) { 106 /***/ (function(module, exports) {
107 107
108 -eval("const videoContainer = document.getElementById(\"jsVideoPlayer\");\nconst videoPlayer = document.querySelector(\"#jsVideoPlayer video\");\nconst playBtn = document.getElementById(\"jsPlayButton\");\nconst volumeBtn = document.getElementById(\"jsVolumeBtn\");\n\n// video element MDN\n// using MDN (Mozila Developer Networks)\nfunction handlePlayClick() {\n if (videoPlayer.paused) {\n videoPlayer.play();\n playBtn.innerHTML = '<i class=\"fas fa-pause\"></i>';\n } else {\n videoPlayer.pause();\n playBtn.innerHTML = '<i class=\"fas fa-play\"></i>';\n }\n}\nfunction handleVolumeClick() {\n if (videoPlayer.muted) {\n videoPlayer.muted = false;\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-up\"></i>';\n } else {\n videoPlayer.muted = true;\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-mute\"></i>';\n }\n}\nfunction init() {\n playBtn.addEventListener(\"click\", handlePlayClick);\n volumeBtn.addEventListener(\"click\", handleVolumeClick);\n}\n\nif (videoContainer) {\n init();\n} // 안 해주면 다른 페이지에서도 js 읽히므로..\n\n\n//# sourceURL=webpack:///./assets/js/videoPlayer.js?"); 108 +eval("const videoContainer = document.getElementById(\"jsVideoPlayer\");\nconst videoPlayer = document.querySelector(\"#jsVideoPlayer video\");\nconst playBtn = document.getElementById(\"jsPlayButton\");\nconst volumeBtn = document.getElementById(\"jsVolumeBtn\");\nconst fullScrnBtn = document.getElementById(\"jsFullScreen\");\nconst currentTime = document.getElementById(\"currentTime\");\nconst totalTime = document.getElementById(\"totalTime\");\nconst volumeRange = document.getElementById(\"jsVolume\");\n\n// video element MDN\n// using MDN (Mozila Developer Networks)\nfunction handlePlayClick() {\n if (videoPlayer.paused) {\n videoPlayer.play();\n playBtn.innerHTML = '<i class=\"fas fa-pause\"></i>';\n } else {\n videoPlayer.pause();\n playBtn.innerHTML = '<i class=\"fas fa-play\"></i>';\n }\n}\nfunction handleVolumeClick() {\n if (videoPlayer.muted) {\n videoPlayer.muted = false;\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-up\"></i>';\n volumeRange.value = videoPlayer.volume;\n } else {\n volumeRange.value = 0;\n videoPlayer.muted = true;\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-mute\"></i>';\n }\n}\n\nfunction exitFullScreen() {\n fullScrnBtn.innerHTML = '<i class=\"fas fa-expand\"></i>';\n fullScrnBtn.removeEventListener(\"click\", exitFullScreen);\n fullScrnBtn.addEventListener(\"click\", goFullScreen);\n\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.mxExitFullscreen) {\n document.mxExitFullscreen();\n }\n}\n\nfunction goFullScreen() {\n if (videoContainer.requestFullscreen) {\n videoContainer.requestFullscreen();\n } else if (videoContainer.mozRequestFullScreen) {\n videoContainer.mozRequestFullScreen();\n } else if (videoContainer.webkitRequestFullscreen) {\n videoContainer.webkitRequestFullscreen();\n } else if (videoContainer.msRequestFullscreen) {\n videoContainer.msRequestFullscreen();\n }\n\n fullScrnBtn.innerHTML = '<i class=\"fas fa-compress\"></i>';\n fullScrnBtn.removeEventListener(\"click\", goFullScreen);\n fullScrnBtn.addEventListener(\"click\", exitFullScreen);\n}\nconst formatDate = (seconds) => {\n const secondsNumber = parseInt(seconds, 10);\n let hours = Math.floor(secondsNumber / 3600);\n let minutes = Math.floor((secondsNumber - hours * 3600) / 60);\n let totalSeconds = secondsNumber - hours * 3600 - minutes * 60;\n\n if (hours < 10) {\n hours = `0${hours}`;\n }\n if (minutes < 10) {\n minutes = `0${minutes}`;\n }\n if (totalSeconds < 10) {\n totalSeconds = `0${totalSeconds}`;\n }\n return `${hours}:${minutes}:${totalSeconds}`;\n};\n\nfunction getCurrentTime() {\n currentTime.innerHTML = formatDate(Math.floor(videoPlayer.currentTime));\n}\nfunction setTotalTime() {\n const totalTimeString = formatDate(videoPlayer.duration);\n totalTime.innerHTML = totalTimeString;\n setInterval(getCurrentTime, 1000);\n}\n\n// 영상이 끝나면 pause하고 다시 앞으로 돌릴 수 있게 하고 싶다...\nfunction handleEnded() {\n videoPlayer.currentTime = 0;\n playBtn.innerHTML = '<i class=\"fas fa-play\"></i>';\n}\nfunction handleDrag(event) {\n const {\n target: { value },\n } = event;\n videoPlayer.volume = value;\n if (value >= 0.6) {\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-up\"></i>';\n } else if (value >= 0.2) {\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-down\"></i>';\n } else {\n volumeBtn.innerHTML = '<i class=\"fas fa-volume-mute\"></i>';\n }\n}\n\nfunction init() {\n videoPlayer.volume = 0.5;\n playBtn.addEventListener(\"click\", handlePlayClick);\n volumeBtn.addEventListener(\"click\", handleVolumeClick);\n fullScrnBtn.addEventListener(\"click\", goFullScreen);\n videoPlayer.addEventListener(\"loadedmetadata\", setTotalTime);\n videoPlayer.addEventListener(\"ended\", handleEnded);\n volumeRange.addEventListener(\"input\", handleDrag);\n}\n\nif (videoContainer) {\n init();\n} // 안 해주면 다른 페이지에서도 js 읽히므로..\n\n\n//# sourceURL=webpack:///./assets/js/videoPlayer.js?");
109 109
110 /***/ }), 110 /***/ }),
111 111
......
...@@ -425,6 +425,7 @@ input[type="submit"] { ...@@ -425,6 +425,7 @@ input[type="submit"] {
425 .videoPlayer:hover .videoPlayer__controls { 425 .videoPlayer:hover .videoPlayer__controls {
426 opacity: 1; } 426 opacity: 1; }
427 .videoPlayer video { 427 .videoPlayer video {
428 + width: 100%;
428 max-width: 100%; } 429 max-width: 100%; }
429 .videoPlayer .videoPlayer__controls { 430 .videoPlayer .videoPlayer__controls {
430 opacity: 0; 431 opacity: 0;
...@@ -453,8 +454,36 @@ input[type="submit"] { ...@@ -453,8 +454,36 @@ input[type="submit"] {
453 -moz-box-align: center; 454 -moz-box-align: center;
454 -ms-flex-align: center; 455 -ms-flex-align: center;
455 align-items: center; } 456 align-items: center; }
456 - .videoPlayer .videoPlayer__controls .videoPlayer__column:first-child span:first-child { 457 + .videoPlayer .videoPlayer__controls .videoPlayer__column:first-child #jsVolumeBtn {
457 margin-right: 10px; } 458 margin-right: 10px; }
459 + .videoPlayer .videoPlayer__controls .videoPlayer__volume {
460 + position: absolute;
461 + padding: 0;
462 + opacity: 1;
463 + top: -60px;
464 + left: -25px;
465 + -webkit-transform: rotate(-90deg);
466 + -moz-transform: rotate(-90deg);
467 + -ms-transform: rotate(-90deg);
468 + -o-transform: rotate(-90deg);
469 + transform: rotate(-90deg);
470 + z-index: 10;
471 + width: 80px;
472 + cursor: pointer; }
473 + .videoPlayer .videoPlayer__controls .videoPlayer__volume input {
474 + background-color: rgba(0, 0, 0, 0.7); }
475 + .videoPlayer .videoPlayer__controls .videoPlayer__volume input::-webkit-slider-runnable-track {
476 + background-color: #f5f5f5;
477 + height: 5px; }
478 + .videoPlayer .videoPlayer__controls .videoPlayer__volume input::-webkit-slider-thumb {
479 + all: unset;
480 + background-color: #ea232c;
481 + height: 15px;
482 + width: 15px;
483 + -webkit-border-radius: 50%;
484 + border-radius: 50%;
485 + position: relative;
486 + top: -5px; }
458 .videoPlayer .videoPlayer__controls .videoPlayer__column:last-child { 487 .videoPlayer .videoPlayer__controls .videoPlayer__column:last-child {
459 justify-self: end; } 488 justify-self: end; }
460 .videoPlayer .videoPlayer__controls .videoPlayer__column:nth-child(2) { 489 .videoPlayer .videoPlayer__controls .videoPlayer__column:nth-child(2) {
......
...@@ -6,10 +6,13 @@ mixin videoPlayer(video={}) ...@@ -6,10 +6,13 @@ mixin videoPlayer(video={})
6 span#jsVolumeBtn 6 span#jsVolumeBtn
7 i.fas.fa-volume-up 7 i.fas.fa-volume-up
8 span 8 span
9 - |00:00 / 10:00 9 + span#currentTime 00:00:00
10 + span /
11 + span#totalTime 00:00:00
12 + input.videoPlayer__volume#jsVolume(type="range", min="0", max="1", step="0.1", value="0.5")
10 .videoPlayer__column 13 .videoPlayer__column
11 span#jsPlayButton 14 span#jsPlayButton
12 i.fas.fa-play 15 i.fas.fa-play
13 .videoPlayer__column 16 .videoPlayer__column
14 - span 17 + span#jsFullScreen
15 i.fas.fa-expand 18 i.fas.fa-expand
...\ No newline at end of file ...\ No newline at end of file
......