MotherProject / 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");
const videoPlayer = document.querySelector("#jsVideoPlayer video");
const playBtn = document.getElementById("jsPlayButton");
const volumeBtn = document.getElementById("jsVolumeBtn");
const fullScrnBtn = document.getElementById("jsFullScreen");
const currentTime = document.getElementById("currentTime");
const totalTime = document.getElementById("totalTime");
const volumeRange = document.getElementById("jsVolume");
// video element MDN
// using MDN (Mozila Developer Networks)
......@@ -18,14 +22,99 @@ function handleVolumeClick() {
if (videoPlayer.muted) {
videoPlayer.muted = false;
volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
volumeRange.value = videoPlayer.volume;
} else {
volumeRange.value = 0;
videoPlayer.muted = true;
volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
}
}
function exitFullScreen() {
fullScrnBtn.innerHTML = '<i class="fas fa-expand"></i>';
fullScrnBtn.removeEventListener("click", exitFullScreen);
fullScrnBtn.addEventListener("click", goFullScreen);
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mxExitFullscreen) {
document.mxExitFullscreen();
}
}
function goFullScreen() {
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else if (videoContainer.mozRequestFullScreen) {
videoContainer.mozRequestFullScreen();
} else if (videoContainer.webkitRequestFullscreen) {
videoContainer.webkitRequestFullscreen();
} else if (videoContainer.msRequestFullscreen) {
videoContainer.msRequestFullscreen();
}
fullScrnBtn.innerHTML = '<i class="fas fa-compress"></i>';
fullScrnBtn.removeEventListener("click", goFullScreen);
fullScrnBtn.addEventListener("click", exitFullScreen);
}
const formatDate = (seconds) => {
const secondsNumber = parseInt(seconds, 10);
let hours = Math.floor(secondsNumber / 3600);
let minutes = Math.floor((secondsNumber - hours * 3600) / 60);
let totalSeconds = secondsNumber - hours * 3600 - minutes * 60;
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (totalSeconds < 10) {
totalSeconds = `0${totalSeconds}`;
}
return `${hours}:${minutes}:${totalSeconds}`;
};
function getCurrentTime() {
currentTime.innerHTML = formatDate(Math.floor(videoPlayer.currentTime));
}
function setTotalTime() {
const totalTimeString = formatDate(videoPlayer.duration);
totalTime.innerHTML = totalTimeString;
setInterval(getCurrentTime, 1000);
}
// 영상이 끝나면 pause하고 다시 앞으로 돌릴 수 있게 하고 싶다...
function handleEnded() {
videoPlayer.currentTime = 0;
playBtn.innerHTML = '<i class="fas fa-play"></i>';
}
function handleDrag(event) {
const {
target: { value },
} = event;
videoPlayer.volume = value;
if (value >= 0.6) {
volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
} else if (value >= 0.2) {
volumeBtn.innerHTML = '<i class="fas fa-volume-down"></i>';
} else {
volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
}
}
function init() {
videoPlayer.volume = 0.5;
playBtn.addEventListener("click", handlePlayClick);
volumeBtn.addEventListener("click", handleVolumeClick);
fullScrnBtn.addEventListener("click", goFullScreen);
videoPlayer.addEventListener("loadedmetadata", setTotalTime);
videoPlayer.addEventListener("ended", handleEnded);
volumeRange.addEventListener("input", handleDrag);
}
if (videoContainer) {
......
......@@ -5,7 +5,9 @@
opacity: 1;
}
}
video {
width: 100%;
max-width: 100%;
}
.videoPlayer__controls {
......@@ -24,10 +26,37 @@
.videoPlayer__column:first-child {
display: flex;
align-items: center;
span:first-child {
#jsVolumeBtn {
margin-right: 10px;
}
}
.videoPlayer__volume {
position: absolute;
padding: 0;
opacity: 1;
top: -60px;
left: -25px;
transform: rotate(-90deg);
z-index: 10;
width: 80px;
cursor: pointer;
input {
background-color: rgba(0, 0, 0, 0.7);
&::-webkit-slider-runnable-track {
background-color: $grey;
height: 5px;
}
&::-webkit-slider-thumb {
all: unset;
background-color: $red;
height: 15px;
width: 15px;
border-radius: 50%;
position: relative;
top: -5px;
}
}
}
.videoPlayer__column:last-child {
justify-self: end;
}
......
......@@ -105,7 +105,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scs
/*! no static exports found */
/***/ (function(module, exports) {
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?");
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?");
/***/ }),
......
......@@ -425,6 +425,7 @@ input[type="submit"] {
.videoPlayer:hover .videoPlayer__controls {
opacity: 1; }
.videoPlayer video {
width: 100%;
max-width: 100%; }
.videoPlayer .videoPlayer__controls {
opacity: 0;
......@@ -453,8 +454,36 @@ input[type="submit"] {
-moz-box-align: center;
-ms-flex-align: center;
align-items: center; }
.videoPlayer .videoPlayer__controls .videoPlayer__column:first-child span:first-child {
.videoPlayer .videoPlayer__controls .videoPlayer__column:first-child #jsVolumeBtn {
margin-right: 10px; }
.videoPlayer .videoPlayer__controls .videoPlayer__volume {
position: absolute;
padding: 0;
opacity: 1;
top: -60px;
left: -25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 10;
width: 80px;
cursor: pointer; }
.videoPlayer .videoPlayer__controls .videoPlayer__volume input {
background-color: rgba(0, 0, 0, 0.7); }
.videoPlayer .videoPlayer__controls .videoPlayer__volume input::-webkit-slider-runnable-track {
background-color: #f5f5f5;
height: 5px; }
.videoPlayer .videoPlayer__controls .videoPlayer__volume input::-webkit-slider-thumb {
all: unset;
background-color: #ea232c;
height: 15px;
width: 15px;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
top: -5px; }
.videoPlayer .videoPlayer__controls .videoPlayer__column:last-child {
justify-self: end; }
.videoPlayer .videoPlayer__controls .videoPlayer__column:nth-child(2) {
......
......@@ -6,10 +6,13 @@ mixin videoPlayer(video={})
span#jsVolumeBtn
i.fas.fa-volume-up
span
|00:00 / 10:00
span#currentTime 00:00:00
span /
span#totalTime 00:00:00
input.videoPlayer__volume#jsVolume(type="range", min="0", max="1", step="0.1", value="0.5")
.videoPlayer__column
span#jsPlayButton
i.fas.fa-play
.videoPlayer__column
span
span#jsFullScreen
i.fas.fa-expand
\ No newline at end of file
......