videojs 첫 도전!

1S3K · May 11, 2020 · 19bfb8e · 19bfb8e
1 parent afb1d79
commit 19bfb8e
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.pnp.*
diff --git a/videojs/ddiyong.jpeg b/videojs/ddiyong.jpeg
diff --git a/videojs/sample.mp4 b/videojs/sample.mp4
diff --git a/videojs/videojs.css b/videojs/videojs.css
@@ -0,0 +1,17 @@
+/*
+전체를 다루는 코드
+.vstyle.video-js{
+  color:#00ff00;
+}
+*/
+
+/*
+이런 식으로 각각의 element에 대해
+색상 등의 스타일을 적용할 수 있다.
+*/
+.vstyle .vjs-big-play-button,
+.vstyle .vjs-volume-level,
+.vstyle .vjs-play-progress,
+.vstyle .vjs-slider-bar{
+  background:#00ff00;
+}
diff --git a/videojs/videojs.html b/videojs/videojs.html
@@ -0,0 +1,28 @@
+<head>
+  <!-- 기본 css 먼저 불러오고 -->
+  <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
+  <!-- 그 담에 내가 정의한 css 불러오고 -->
+  <link href="./videojs.css" rel="stylesheet" />
+  <title>Videojs-sample</title>
+</head>
+
+<body>
+  <!-- html5 비디오태그에 해당하는 설정은 여기서 해도 무방. -->
+  <video
+    id="sample-video"
+    class="video-js"
+    controls
+    preload="auto"
+    width="640"
+    height="264"
+    poster="ddiyong.jpeg"
+    data-setup="{}"
+  >
+    <!-- src에 내가 넣고싶은 영상 위치 넣고 -->
+    <source src="sample.mp4" type="video/mp4" />
+  </video>
+  <!-- 기본 js 먼저 불러오고 -->
+  <script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
+  <!-- 그 담에 내가 정의한 js 불러오면 됨 -->
+  <script src='./videojs.js'></script>
+</body>
diff --git a/videojs/videojs.js b/videojs/videojs.js
@@ -0,0 +1,27 @@
+/**
+ * 이런 식으로 'sample-video'라는 클래스명을 가진 비디오에 접근할 수 있고
+ * 그냥 전통적인 dom 접근방식으로
+ * let v = document.querySelector('sample-video') 해도 무방.
+ */
+let v = videojs('sample-video');
+
+/**
+ * 비디오가 준비될 때의 콜백함수들.
+ * 함수명만 봐도 느낌이 온다.
+ */
+v.ready(()=>{
+  // v.volume(0.5);
+  // v.muted(false);
+  // v.isFullscreen(true);
+  // v.play();
+  // v.pause();
+  // v.currentTime(120);
+  // v.addClass('vstyle');
+})
+
+/**
+ * 이런 식으로 css를 적용하려면
+ * 해당하는 class명을 부여할 수 있음.
+ * 어떤 스타일인지는 videojs.css 참조.
+ */
+v.addClass('vstyle');
diff --git a/videojs/분석.txt b/videojs/분석.txt
@@ -0,0 +1,48 @@
+우리의 메인 목표
+  1. 질문 입력창
+    -> UI가 나와봐야 알 것 같지만, 박스모델 하나에 플레이어와 질문입력창을 담고, default로 질문입력창을 숨기고 있다가, 버튼을 누르면 나오게 하는 식으로 하면 가능할듯. 
+
+  2. PlayProgressBar에 질문 위치 마크
+    -> 해당 API가 있어, JS+CSS로 가능할듯.
+
+  3. 질문 뜨기 10초 전후로 박스 출력
+    -> TextTrack이라고 해가지고 캡션기능을 지원함. 가능할듯.
+
+
+분석에 참고한 자료들
+  docs.videojs.com
+   -> 독스인데 나름 잘 나와있음.
+  https://www.youtube.com/watch?v=htf5I3wxTlU
+   -> 4강짜리 videojs 기초 강의인데, 기본기를 쉽게 알려줌.
+      독스가 어렵다면 이거 먼저 봐도 괜춘.
+
+
+독스 Guide 중 볼만한 항목들
+  Setup
+    html 복붙하고, 그걸 다룰 js랑 css를 만드는 식으로 ㄱㄱ.
+    설치 필요없이 맨땅에서도 생성 가능.
+    html5에 video 자체태그에서 옵션을 주어도 되지만, 한정적이어서 js에서 제어하는 걸 추천.
+
+  Player-Workflows
+    기본적인 기능들..
+    볼륨설정, 전체화면, 재생, 일시정지 등등을 js로 제어가능. 생각보다 쉽다.
+
+  Tracks
+    영상과 함께 대충 무언가를 띄우는 것 같다.
+    Audio Track, Video Track, Text Track 세 가지가 있는데
+    Text Track의 경우 vtt 형식의 자막과 연동이 된다.
+    이걸 활용하면 해당 시간에 질문을 띄우는게 가능할지도?
+
+  Customizing
+    다양한 항목들 중
+    Skins에는 CSS 설정하는 방법이 나오고
+    Components에서는 플레이어를 이루고 있는 컴포넌트를 다루는 법이 나옴.
+    좀 익숙해지면 보면 될듯
+
+독스 API
+  너무 많아서 일단 스킵하긴 했는데
+  기능별로 세세한 가이드라고 보면 됨.
+  필요한 게 있으면 그때그때 찾아보면 될듯.
+
+
+