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 | ... | ... |
-
Please register or login to post a comment