Interactive transcripts display

get transcripts for youtube, wistia, brightcove
- add transcripts to context template players
- add button for subtitles and text block with translates

video_xblock/backends/base.py

@@ -47,15 +47,21 @@ def get_frag(self, **context):
         frag.add_javascript(self.resource_string(
             '../static/bower_components/video.js/dist/video.min.js'
         ))
+        frag.add_javascript(self.resource_string(
+            '../static/bower_components/videojs-transcript/dist/videojs-transcript.js'
+        ))
         frag.add_javascript(self.resource_string(
             '../static/js/video-speed.js'
         ))
         frag.add_javascript(
             self.render_resource('../static/js/player_state.js', **context)
         )
         frag.add_javascript(
-            self.render_resource('../static/js/videojs_event_plugin.js', **context)
+            self.render_resource('../static/js/video-transcript.js', **context)
         )
+        frag.add_javascript(self.render_resource(
+            '../static/js/videojs_event_plugin.js', **context
+        ))
 
         return frag
 

video_xblock/backends/brightcove.py

@@ -36,8 +36,11 @@ def get_frag(self, **context):
             self.render_resource('../static/js/player_state.js', **context)
         )
         frag.add_javascript(
-            self.render_resource('../static/js/videojs_event_plugin.js', **context)
+            self.render_resource('../static/js/video-transcript.js', **context)
         )
+        frag.add_javascript(self.render_resource(
+            '../static/js/videojs_event_plugin.js', **context
+        ))
         frag.add_css(self.resource_string(
             '../static/css/brightcove.css'
         ))

video_xblock/backends/youtube.py

@@ -31,10 +31,6 @@ def get_frag(self, **context):
             "youtube": {"iv_load_policy": 1},
             "playbackRates": [0.5, 1, 1.5, 2],
             "plugins": {
-                "videoJsResolutionSwitcher": {
-                    "dynamicLabel": True,
-                    "default": "low"
-                },
                 "xblockEventPlugin": {}
             }
         })

video_xblock/static/bower.json

@@ -5,6 +5,7 @@
     "video-js": "5.13.1",
     "videojs-youtube": "raccoongang/videojs-youtube#playback-rate-fix",
     "videojs-wistia": "raccoongang/videojs-wistia#playback-toggle-fix",
+    "videojs-transcript": "0.8.0",
     "videojs-resolution-switcher": "85f1e51c8babefca2d670dbd0b21a6307dbb4d21"
   },
   "private": true

video_xblock/static/html/brightcove.html

@@ -10,10 +10,17 @@
         height="511"
         class="video-js"
         controls
-    ></video>
+    >
+      {% for transcript in player_state.transcripts %}
+        <track kind="captions" src="{{ transcript.url }}" srclang="{{ transcript.lang }}" label="{{ transcript.label }}"
+        {% if forloop.first %}default{% endif %}>
+      {% endfor %}
+    </video>
     <script src="//players.brightcove.net/{{ account_id }}/{{ player_id }}_default/index.min.js"></script>
+    <script src="https://cdn.rawgit.com/walsh9/videojs-transcript/master/dist/videojs-transcript.min.js"></script>
     <script>
         videojs.plugin('xblockEventPlugin', xblockEventPlugin);
         videojs('{{ video_player_id }}').xblockEventPlugin();
     </script>
 </div>
+<div id="transcript"></div>

video_xblock/static/html/wistiavideo.html

@@ -6,4 +6,9 @@
   width="829" height="511"
   data-setup='{{ data_setup }}'
 >
+  {% for transcript in player_state.transcripts %}
+    <track kind="captions" src="{{ transcript.url }}" srclang="{{ transcript.lang }}" label="{{ transcript.label }}"
+    {% if forloop.first %}default{% endif %}>
+  {% endfor %}
 </video>
+<div id="transcript"></div>

video_xblock/static/html/youtube.html

@@ -5,4 +5,9 @@
   width="829" height="511"
   data-setup='{{ data_setup }}'
 >
+  {% for transcript in player_state.transcripts %}
+    <track kind="captions" src="{{ transcript.url }}" srclang="{{ transcript.lang }}" label="{{ transcript.label }}"
+    {% if forloop.first %}default{% endif %}>
+  {% endfor %}
 </video>
+<div id="transcript"></div>

video_xblock/static/js/video-transcript.js

@@ -0,0 +1,13 @@
+domReady(function() {
+  videojs('{{ video_player_id }}').ready(function(){
+
+    // fire up the plugin
+    var transcript = this.transcript({
+      'showTrackSelector': false
+    });
+
+    // attach the widget to the page
+    var transcriptContainer = document.querySelector('#transcript');
+    transcriptContainer.appendChild(transcript.el());
+  });
+});

video_xblock/video_xblock.py

@@ -117,7 +117,8 @@ def player_state(self):
             'current_time': self.current_time,
             'muted': self.muted,
             'playback_rate': self.playback_rate,
-            'volume': self.volume
+            'volume': self.volume,
+            'transcripts': json.loads(self.transcripts) if self.transcripts else [],
         }
 
     @player_state.setter
@@ -129,6 +130,7 @@ def player_state(self, state):
         self.muted = state.get('muted', self.muted)
         self.playback_rate = state.get('playback_rate', self.playback_rate)
         self.volume = state.get('volume', self.volume)
+        self.transcripts = state.get('transcripts', self.transcripts)
 
     def validate_field_data(self, validation, data):
         """
@@ -252,7 +254,8 @@ def save_player_state(self, request, suffix=''):
             'current_time': request['currentTime'],
             'playback_rate': request['playbackRate'],
             'volume': request['volume'],
-            'muted': request['muted']
+            'muted': request['muted'],
+            'transcripts': self.transcripts
         }
         self.player_state = player_state
         return {'success': True}