5, 10초 뒤로 돌아가기 기능 구현. 자막 켜기/끄기 기능 구현. 컨트롤로 앞에 기능 이름 추가

zelon · Nov 6, 2015 · f944c51 · f944c51
1 parent 5bcdd2f
commit f944c51
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/static/html/index.htm b/static/html/index.htm
@@ -54,23 +54,42 @@
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>
-    <br/>
     <div class="row">
       <div class="col-md-8">
         <div class="row">
           <div class="col-md-2"></div>
           <div class="col-md-8">
             <div id="player"></div>
-            <div id="repeat">
+            <div>
               <br/>
-              <input id="progress-bar" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-handle="triangle" style="width: 640px;"/>
-              <br/>
-              <input id="repeat-bar" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" style="width: 640px;"/>
             </div>
-            <div id="rate">속도 조절 기능</div>
           </div>
           <div class="col-md-2"></div>
         </div>
+        <div class="row">
+          <div class="col-md-2" align="right">Current:</div>
+          <div class="col-md-10">
+            <input id="progress-bar" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-handle="triangle" style="width: 640px;"/>
+          </div>
+          <div class="col-md-2" align="right">Repeat:</div>
+          <div class="col-md-10">
+            <input id="repeat-bar" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" style="width: 640px;"/>
+          </div>
+          <div class="col-md-2" align="right">Speed Rate:</div>
+          <div class="col-md-10">
+            <div id="rate"></div>
+          </div>
+          <div class="col-md-2" align="right">Playback:</div>
+          <div class="col-md-10">
+            <button onclick="BackSeconds(5);">5 seconds back</button>
+            <button onclick="BackSeconds(10);">10 seconds back</button>
+          </div>
+          <div class="col-md-2" align="right">Caption:</div>
+          <div class="col-md-10">
+            <button onclick="TurnOnCaption();">On</button>
+            <button onclick="TurnOffCaption();">Off</button>
+          </div>
+        </div>
       </div>
       <div class="col-md-4">
         여기에 검색된 단어들 목록 주우욱~~<br/>
@@ -132,6 +151,7 @@
     var progress_bar_slider = $("#progress-bar").slider({ tooltip: 'always' });
     var repeat_bar_slider = $("#repeat-bar").slider({});
     $(document).ready(function(){
+      setTimeout(OnTimer, 500);
     });
     </script>
   </body>

diff --git a/static/html/ui.js b/static/html/ui.js
@@ -2,15 +2,15 @@
 function make_rate_buttons() {
   var rate_div = document.getElementById("rate");
 	var rate_list = player.getAvailablePlaybackRates();
-  var html = "속도 조절 :";
+  var html = "";
 
   if (rate_list.length == 0) {
-    rate_div.innerHTML = html + " 불가능";
+    rate_div.innerHTML = "Disabled";
     return;
   }
   for (var i=0; i<rate_list.length; ++i) {
     var speed = rate_list[i];
-    html += "&nbsp;<button onclick='set_rate(" + speed + ");'>" + speed + "</button>";
+    html += "<button onclick='set_rate(" + speed + ");'>" + speed + "x</button>";
   }
   rate_div.innerHTML = html;
 }
@@ -50,18 +50,40 @@ function check_repeat() {
 }
 
 function OnTimer() {
+  setTimeout(OnTimer, 500);
+
+  if (player == null) {
+    return;
+  }
   var current = player.getCurrentTime();
   progress_bar_slider.slider('setValue', current);
 
   check_repeat();
-
-  setTimeout(OnTimer, 500);
 }
 
 function onYoutubePlayingStarted() {
   set_progressbar_values_by_video();
-  setTimeout(OnTimer, 500);
 }
+
+function TurnOnCaption() {
+  player.loadModule("captions");
+  player.setOption("captions", "track", {"languageCode":"en"});
+}
+
+function TurnOffCaption() {
+  player.unloadModule("captions");
+}
+
+function BackSeconds(seconds) {
+  var current = player.getCurrentTime();
+  var new_position = current - seconds;
+
+  if (new_position < 0) {
+    new_position = 0;
+  }
+  player.seekTo(new_position);
+}
+
 /*
  현재 재생 시간(초) : player.getCurrentTime():Number
  전체 재생 시간 : player.getDuration():Number 단, 재생이 시작된 직후부터 가능. 이전에는 0 이 반환됨