MotherProject / myYoutube

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

[Modified] Screen

Inline Side-by-side
Showing 3 changed files with 37 additions and 4 deletions
1 +const videoContainer = document.getElementById("jsVideoPlayer");
2 +const videoPlayer = document.querySelector("#jsVideoPlayer video");
3 +const playBtn = document.getElementById("jsPlayButton");
4 +const volumeBtn = document.getElementById("jsVolumeBtn");
5 +
6 +// video element MDN
7 +// using MDN (Mozila Developer Networks)
8 +function handlePlayClick() {
9 + if (videoPlayer.paused) {
10 + videoPlayer.play();
11 + playBtn.innerHTML = '<i class="fas fa-pause"></i>';
12 + } else {
13 + videoPlayer.pause();
14 + playBtn.innerHTML = '<i class="fas fa-play"></i>';
15 + }
16 +}
17 +function handleVolumeClick() {
18 + if (videoPlayer.muted) {
19 + videoPlayer.muted = false;
20 + volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
21 + } else {
22 + videoPlayer.muted = true;
23 + volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
24 + }
25 +}
26 +function init() {
27 + playBtn.addEventListener("click", handlePlayClick);
28 + volumeBtn.addEventListener("click", handleVolumeClick);
29 +}
30 +
31 +if (videoContainer) {
32 + init();
33 +} // 안 해주면 다른 페이지에서도 js 읽히므로..
......
...@@ -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("\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\");\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?");
109 109
110 /***/ }), 110 /***/ }),
111 111
......
1 mixin videoPlayer(video={}) 1 mixin videoPlayer(video={})
2 - .videoPlayer 2 + .videoPlayer#jsVideoPlayer
3 video(src=`/${video.src}`) 3 video(src=`/${video.src}`)
4 .videoPlayer__controls 4 .videoPlayer__controls
5 .videoPlayer__column 5 .videoPlayer__column
6 - span 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 |00:00 / 10:00
10 .videoPlayer__column 10 .videoPlayer__column
11 - span 11 + span#jsPlayButton
12 i.fas.fa-play 12 i.fas.fa-play
13 .videoPlayer__column 13 .videoPlayer__column
14 span 14 span
......