Merge pull request #1409 from MITx/feature/valera/video_alpha

Feature/valera/video alpha

common/lib/xmodule/setup.py

@@ -37,6 +37,7 @@ setup(
             "timelimit = xmodule.timelimit_module:TimeLimitDescriptor",
             "vertical = xmodule.vertical_module:VerticalDescriptor",
             "video = xmodule.video_module:VideoDescriptor",
+            "videoalpha = xmodule.videoalpha_module:VideoAlphaDescriptor",
             "videodev = xmodule.backcompat_module:TranslateCustomTagDescriptor",
             "videosequence = xmodule.seq_module:SequenceDescriptor",
             "discussion = xmodule.discussion_module:DiscussionDescriptor",

common/lib/xmodule/xmodule/js/src/.gitignore

-*.js
-
+# Please do not ignore *.js files. Some xmodules are written in JS.

common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee

+class @VideoAlpha
+  constructor: (element) ->
+    @el = $(element).find('.video')
+    @id = @el.attr('id').replace(/video_/, '')
+    @start = @el.data('start')
+    @end = @el.data('end')
+    @caption_data_dir = @el.data('caption-data-dir')
+    @caption_asset_path = @el.data('caption-asset-path')
+    @show_captions = @el.data('show-captions').toString() == "true"
+    @el = $("#video_#{@id}")
+    if @parseYoutubeId(@el.data("streams")) is true
+      @videoType = "youtube"
+      @fetchMetadata()
+      @parseSpeed()
+    else
+      @videoType = "html5"
+      @parseHtml5Sources @el.data('mp4-source'), @el.data('webm-source'), @el.data('ogg-source')
+      @speeds = ['0.75', '1.0', '1.25', '1.50']
+      sub = @el.data('sub')
+      if (typeof sub isnt "string") or (sub.length is 0)
+        sub = ""
+        @show_captions = false
+      @videos =
+        "0.75": sub
+        "1.0": sub
+        "1.25": sub
+        "1.5": sub
+      @setSpeed $.cookie('video_speed')
+    $("#video_#{@id}").data('video', this).addClass('video-load-complete')
+    if @show_captions is true
+      @hide_captions = $.cookie('hide_captions') == 'true'
+    else
+      @hide_captions = true
+      $.cookie('hide_captions', @hide_captions, expires: 3650, path: '/')
+      @el.addClass 'closed'
+    if ((@videoType is "youtube") and (YT.Player)) or ((@videoType is "html5") and (HTML5Video.Player))
+      @embed()
+    else
+      if @videoType is "youtube"
+        window.onYouTubePlayerAPIReady = =>
+          @embed()
+      else if @videoType is "html5"
+        window.onHTML5PlayerAPIReady = =>
+          @embed()
+
+  youtubeId: (speed)->
+    @videos[speed || @speed]
+
+  parseYoutubeId: (videos)->
+    return false  if (typeof videos isnt "string") or (videos.length is 0)
+    @videos = {}
+    $.each videos.split(/,/), (index, video) =>
+      speed = undefined
+      video = video.split(/:/)
+      speed = parseFloat(video[0]).toFixed(2).replace(/\.00$/, ".0")
+      @videos[speed] = video[1]
+    true
+
+  parseHtml5Sources: (mp4Source, webmSource, oggSource)->
+    @html5Sources =
+      mp4: null
+      webm: null
+      ogg: null
+    @html5Sources.mp4 = mp4Source  if (typeof mp4Source is "string") and (mp4Source.length > 0)
+    @html5Sources.webm = webmSource  if (typeof webmSource is "string") and (webmSource.length > 0)
+    @html5Sources.ogg = oggSource  if (typeof oggSource is "string") and (oggSource.length > 0)
+
+  parseSpeed: ->
+    @speeds = ($.map @videos, (url, speed) -> speed).sort()
+    @setSpeed $.cookie('video_speed')
+
+  setSpeed: (newSpeed, updateCookie)->
+    if @speeds.indexOf(newSpeed) isnt -1
+      @speed = newSpeed
+
+      if updateCookie isnt false
+        $.cookie "video_speed", "" + newSpeed,
+          expires: 3650
+          path: "/"
+    else
+      @speed = "1.0"
+
+  embed: ->
+    @player = new VideoPlayerAlpha video: this
+
+  fetchMetadata: (url) ->
+    @metadata = {}
+    $.each @videos, (speed, url) =>
+      $.get "https://gdata.youtube.com/feeds/api/videos/#{url}?v=2&alt=jsonc", ((data) => @metadata[data.data.id] = data.data) , 'jsonp'
+
+  getDuration: ->
+    @metadata[@youtubeId()].duration
+
+  log: (eventName)->
+    logInfo =
+      id: @id
+      code: @youtubeId()
+      currentTime: @player.currentTime
+      speed: @speed
+    if @videoType is "youtube"
+      logInfo.code = @youtubeId()
+    else logInfo.code = "html5"  if @videoType is "html5"
+    Logger.log eventName, logInfo

common/lib/xmodule/xmodule/js/src/videoalpha/display/_subview.coffee

+class @SubviewAlpha
+  constructor: (options) ->
+    $.each options, (key, value) =>
+      @[key] = value
+    @initialize()
+    @render()
+    @bind()
+
+  $: (selector) ->
+    $(selector, @el)
+
+  initialize: ->
+  render: ->
+  bind: ->

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.coffee

+class @VideoCaptionAlpha extends SubviewAlpha
+  initialize: ->
+    @loaded = false
+
+  bind: ->
+    $(window).bind('resize', @resize)
+    @$('.hide-subtitles').click @toggle
+    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
+      .mousemove(@onMovement).bind('mousewheel', @onMovement)
+      .bind('DOMMouseScroll', @onMovement)
+
+  captionURL: ->
+    "#{@captionAssetPath}#{@youtubeId}.srt.sjson"
+
+  render: ->
+    # TODO: make it so you can have a video with no captions.
+    #@$('.video-wrapper').after """
+    #  <ol class="subtitles"><li>Attempting to load captions...</li></ol>
+    #  """
+    @$('.video-wrapper').after """
+      <ol class="subtitles"></ol>
+      """
+    @$('.video-controls .secondary-controls').append """
+      <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
+      """#"
+    @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5
+    @fetchCaption()
+
+  fetchCaption: ->
+    $.getWithPrefix @captionURL(), (captions) =>
+      @captions = captions.text
+      @start = captions.start
+
+      @loaded = true
+
+      if onTouchBasedDevice()
+        $('.subtitles li').html "Caption will be displayed when you start playing the video."
+      else
+        @renderCaption()
+
+  renderCaption: ->
+    container = $('<ol>')
+
+    $.each @captions, (index, text) =>
+      container.append $('<li>').html(text).attr
+        'data-index': index
+        'data-start': @start[index]
+
+    @$('.subtitles').html(container.html())
+    @$('.subtitles li[data-index]').click @seekPlayer
+
+    # prepend and append an empty <li> for cosmetic reason
+    @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
+      .append($('<li class="spacing">').height(@bottomSpacingHeight()))
+
+    @rendered = true
+
+  search: (time) ->
+    if @loaded
+      min = 0
+      max = @start.length - 1
+
+      while min < max
+        index = Math.ceil((max + min) / 2)
+        if time < @start[index]
+          max = index - 1
+        if time >= @start[index]
+          min = index
+      return min
+
+  play: ->
+    if @loaded
+      @renderCaption() unless @rendered
+      @playing = true
+
+  pause: ->
+    if @loaded
+      @playing = false
+
+  updatePlayTime: (time) ->
+    if @loaded
+      # This 250ms offset is required to match the video speed
+      time = Math.round(Time.convert(time, @currentSpeed, '1.0') * 1000 + 250)
+      newIndex = @search time
+
+      if newIndex != undefined && @currentIndex != newIndex
+        if @currentIndex
+          @$(".subtitles li.current").removeClass('current')
+        @$(".subtitles li[data-index='#{newIndex}']").addClass('current')
+
+        @currentIndex = newIndex
+        @scrollCaption()
+
+  resize: =>
+    @$('.subtitles').css maxHeight: @captionHeight()
+    @$('.subtitles .spacing:first').height(@topSpacingHeight())
+    @$('.subtitles .spacing:last').height(@bottomSpacingHeight())
+    @scrollCaption()
+
+  onMouseEnter: =>
+    clearTimeout @frozen if @frozen
+    @frozen = setTimeout @onMouseLeave, 10000
+
+  onMovement: =>
+    @onMouseEnter()
+
+  onMouseLeave: =>
+    clearTimeout @frozen if @frozen
+    @frozen = null
+    @scrollCaption() if @playing
+
+  scrollCaption: ->
+    if !@frozen && @$('.subtitles .current:first').length
+      @$('.subtitles').scrollTo @$('.subtitles .current:first'),
+        offset: - @calculateOffset(@$('.subtitles .current:first'))
+
+  seekPlayer: (event) =>
+    event.preventDefault()
+    time = Math.round(Time.convert($(event.target).data('start'), '1.0', @currentSpeed) / 1000)
+    $(@).trigger('seek', time)
+
+  calculateOffset: (element) ->
+    @captionHeight() / 2 - element.height() / 2
+
+  topSpacingHeight: ->
+    @calculateOffset(@$('.subtitles li:not(.spacing):first'))
+
+  bottomSpacingHeight: ->
+    @calculateOffset(@$('.subtitles li:not(.spacing):last'))
+
+  toggle: (event) =>
+    event.preventDefault()
+    if @el.hasClass('closed') # Captions are "closed" e.g. turned off
+      @hideCaptions(false)
+    else # Captions are on
+      @hideCaptions(true)
+
+  hideCaptions: (hide_captions) =>
+    if hide_captions
+      @$('.hide-subtitles').attr('title', 'Turn on captions')
+      @el.addClass('closed')
+    else
+      @$('.hide-subtitles').attr('title', 'Turn off captions')
+      @el.removeClass('closed')
+      @scrollCaption()
+    $.cookie('hide_captions', hide_captions, expires: 3650, path: '/')
+
+  captionHeight: ->
+    if @el.hasClass('fullscreen')
+      $(window).height() - @$('.video-controls').height()
+    else
+      @$('.video-wrapper').height()

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.coffee

+class @VideoControlAlpha extends SubviewAlpha
+  bind: ->
+    @$('.video_control').click @togglePlayback
+
+  render: ->
+    @el.append """
+      <div class="slider"></div>
+      <div>
+        <ul class="vcr">
+          <li><a class="video_control" href="#"></a></li>
+          <li>
+            <div class="vidtime">0:00 / 0:00</div>
+          </li>
+        </ul>
+        <div class="secondary-controls">
+          <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
+        </div>
+      </div>
+      """#"
+
+    unless onTouchBasedDevice()
+      @$('.video_control').addClass('play').html('Play')
+
+  play: ->
+    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+
+  pause: ->
+    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+
+  togglePlayback: (event) =>
+    event.preventDefault()
+    if @$('.video_control').hasClass('play')
+      $(@).trigger('play')
+    else if @$('.video_control').hasClass('pause')
+      $(@).trigger('pause')

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.coffee

+class @VideoProgressSliderAlpha extends SubviewAlpha
+  initialize: ->
+    @buildSlider() unless onTouchBasedDevice()
+
+  buildSlider: ->
+    @slider = @el.slider
+      range: 'min'
+      change: @onChange
+      slide: @onSlide
+      stop: @onStop
+    @buildHandle()
+
+  buildHandle: ->
+    @handle = @$('.slider .ui-slider-handle')
+    @handle.qtip
+      content: "#{Time.format(@slider.slider('value'))}"
+      position:
+        my: 'bottom center'
+        at: 'top center'
+        container: @handle
+      hide:
+        delay: 700
+      style:
+        classes: 'ui-tooltip-slider'
+        widget: true
+
+  play: =>
+    @buildSlider() unless @slider
+
+  updatePlayTime: (currentTime, duration) ->
+    if @slider && !@frozen
+      @slider.slider('option', 'max', duration)
+      @slider.slider('value', currentTime)
+
+  onSlide: (event, ui) =>
+    @frozen = true
+    @updateTooltip(ui.value)
+    $(@).trigger('seek', ui.value)
+
+  onChange: (event, ui) =>
+    @updateTooltip(ui.value)
+
+  onStop: (event, ui) =>
+    @frozen = true
+    $(@).trigger('seek', ui.value)
+    setTimeout (=> @frozen = false), 200
+
+  updateTooltip: (value)->
+    @handle.qtip('option', 'content.text', "#{Time.format(value)}")

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.coffee

+class @VideoQualityControlAlpha extends SubviewAlpha
+  initialize: ->
+    @quality = null;
+
+  bind: ->
+    @$('.quality_control').click @toggleQuality
+
+  render: ->
+    @el.append """
+      <a href="#" class="quality_control" title="HD">HD</a>
+      """#"
+
+  onQualityChange: (value) ->
+    @quality = value
+    if @quality in ['hd720', 'hd1080', 'highres']
+        @el.addClass('active')
+    else
+        @el.removeClass('active')
+
+  toggleQuality: (event) =>
+    event.preventDefault()
+    if @quality in ['hd720', 'hd1080', 'highres']
+        newQuality = 'large'
+    else
+        newQuality = 'hd720'
+    $(@).trigger('changeQuality', newQuality)
\ No newline at end of file

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.coffee

+class @VideoSpeedControlAlpha extends SubviewAlpha
+  bind: ->
+    @$('.video_speeds a').click @changeVideoSpeed
+    if onTouchBasedDevice()
+      @$('.speeds').click (event) ->
+        event.preventDefault()
+        $(this).toggleClass('open')
+    else
+      @$('.speeds').mouseenter ->
+        $(this).addClass('open')
+      @$('.speeds').mouseleave ->
+        $(this).removeClass('open')
+      @$('.speeds').click (event) ->
+        event.preventDefault()
+        $(this).removeClass('open')
+
+  render: ->
+    @el.prepend """
+      <div class="speeds">
+        <a href="#">
+          <h3>Speed</h3>
+          <p class="active"></p>
+        </a>
+        <ol class="video_speeds"></ol>
+      </div>
+      """
+    $.each @speeds, (index, speed) =>
+      link = $('<a>').attr(href: "#").html("#{speed}x")
+      @$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link))
+    @setSpeed @currentSpeed
+
+  reRender: (newSpeeds, currentSpeed) ->
+    @$('.video_speeds').empty()
+    @$('.video_speeds li').removeClass('active')
+    @speeds = newSpeeds
+    $.each @speeds, (index, speed) =>
+      link = $('<a>').attr(href: "#").html("#{speed}x")
+      listItem = $('<li>').attr('data-speed', speed).html(link);
+      listItem.addClass('active') if speed is currentSpeed
+      @$('.video_speeds').prepend listItem
+    @$('.video_speeds a').click @changeVideoSpeed
+
+  changeVideoSpeed: (event) =>
+    event.preventDefault()
+    unless $(event.target).parent().hasClass('active')
+      @currentSpeed = $(event.target).parent().data('speed')
+      $(@).trigger 'speedChange', $(event.target).parent().data('speed')
+      @setSpeed(parseFloat(@currentSpeed).toFixed(2).replace /\.00$/, '.0')
+
+  setSpeed: (speed) ->
+    @$('.video_speeds li').removeClass('active')
+    @$(".video_speeds li[data-speed='#{speed}']").addClass('active')
+    @$('.speeds p.active').html("#{speed}x")

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.coffee

+class @VideoVolumeControlAlpha extends SubviewAlpha
+  initialize: ->
+    @currentVolume = 100
+
+  bind: ->
+    @$('.volume').mouseenter ->
+      $(this).addClass('open')
+    @$('.volume').mouseleave ->
+      $(this).removeClass('open')
+    @$('.volume>a').click(@toggleMute)
+
+  render: ->
+    @el.prepend """
+      <div class="volume">
+        <a href="#"></a>
+        <div class="volume-slider-container">
+          <div class="volume-slider"></div>
+        </div>
+      </div>
+      """#"
+    @slider = @$('.volume-slider').slider
+      orientation: "vertical"
+      range: "min"
+      min: 0
+      max: 100
+      value: 100
+      change: @onChange
+      slide: @onChange
+
+  onChange: (event, ui) =>
+    @currentVolume = ui.value
+    $(@).trigger 'volumeChange', @currentVolume
+    @$('.volume').toggleClass 'muted', @currentVolume == 0
+
+  toggleMute: =>
+    if @currentVolume > 0
+      @previousVolume = @currentVolume
+      @slider.slider 'option', 'value', 0
+    else
+      @slider.slider 'option', 'value', @previousVolume

common/lib/xmodule/xmodule/templates/videoalpha/default.yaml

+---
+metadata:
+    display_name: default
+    data_dir: a_made_up_name
+data: |
+  <videoalpha  youtube="0.75:JMD_ifUUfsU,1.0:OEoXaMPEzfM,1.25:AKqURZnYqpk,1.50:DYpADpL7jAY"/>
+children: []

common/lib/xmodule/xmodule/video_module.py

@@ -4,6 +4,8 @@ import logging
 from lxml import etree
 from pkg_resources import resource_string, resource_listdir
 
+from django.http import Http404
+
 from xmodule.x_module import XModule
 from xmodule.raw_module import RawDescriptor
 from xmodule.modulestore.xml import XMLModuleStore
@@ -13,9 +15,6 @@ from xmodule.contentstore.content import StaticContent
 import datetime
 import time
 
-import datetime
-import time
-
 log = logging.getLogger(__name__)
 
 

common/lib/xmodule/xmodule/videoalpha_module.py

+import json
+import logging
+
+from lxml import etree
+from pkg_resources import resource_string, resource_listdir
+
+from django.http import Http404
+
+from xmodule.x_module import XModule
+from xmodule.raw_module import RawDescriptor
+from xmodule.modulestore.mongo import MongoModuleStore
+from xmodule.modulestore.django import modulestore
+from xmodule.contentstore.content import StaticContent
+
+import datetime
+import time
+
+log = logging.getLogger(__name__)
+
+
+class VideoAlphaModule(XModule):
+    """
+    XML source example:
+
+        <videoalpha show_captions="true"
+            youtube="0.75:jNCf2gIqpeE,1.0:ZwkTiUPN0mg,1.25:rsq9auxASqI,1.50:kMyNdzVHHgg"
+            url_name="lecture_21_3" display_name="S19V3: Vacancies"
+        >
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.mp4"/>
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.webm"/>
+            <source src=".../mit-3091x/M-3091X-FA12-L21-3_100.ogv"/>
+        </videoalpha>
+    """
+    video_time = 0
+    icon_class = 'video'
+
+    js = {
+        'js': [resource_string(__name__, 'js/src/videoalpha/display/html5_video.js')],
+        'coffee':
+        [resource_string(__name__, 'js/src/time.coffee'),
+         resource_string(__name__, 'js/src/videoalpha/display.coffee')] +
+        [resource_string(__name__, 'js/src/videoalpha/display/' + filename)
+         for filename
+         in sorted(resource_listdir(__name__, 'js/src/videoalpha/display'))
+         if filename.endswith('.coffee')]}
+    css = {'scss': [resource_string(__name__, 'css/videoalpha/display.scss')]}
+    js_module_name = "VideoAlpha"
+
+    def __init__(self, system, location, definition, descriptor,
+                 instance_state=None, shared_state=None, **kwargs):
+        XModule.__init__(self, system, location, definition, descriptor,
+                         instance_state, shared_state, **kwargs)
+        xmltree = etree.fromstring(self.definition['data'])
+        self.youtube_streams = xmltree.get('youtube')
+        self.sub = xmltree.get('sub')
+        self.position = 0
+        self.show_captions = xmltree.get('show_captions', 'true')
+        self.sources = {
+            'main': self._get_source(xmltree),
+            'mp4': self._get_source(xmltree, ['mp4']),
+            'webm': self._get_source(xmltree, ['webm']),
+            'ogv': self._get_source(xmltree, ['ogv']),
+        }
+        self.track = self._get_track(xmltree)
+        self.start_time, self.end_time = self._get_timeframe(xmltree)
+
+        if instance_state is not None:
+            state = json.loads(instance_state)
+            if 'position' in state:
+                self.position = int(float(state['position']))
+
+    def _get_source(self, xmltree, exts=None):
+        """Find the first valid source, which ends with one of `exts`."""
+        exts = ['mp4', 'ogv', 'avi', 'webm'] if exts is None else exts
+        condition = lambda src: any([src.endswith(ext) for ext in exts])
+        return self._get_first_external(xmltree, 'source', condition)
+
+    def _get_track(self, xmltree):
+        # find the first valid track
+        return self._get_first_external(xmltree, 'track')
+
+    def _get_first_external(self, xmltree, tag, condition=bool):
+        """Will return the first 'valid' element of the given tag.
+        'valid' means that `condition('src' attribute) == True`
+        """
+        result = None
+
+        for element in xmltree.findall(tag):
+            src = element.get('src')
+            if condition(src):
+                result = src
+                break
+        return result
+
+    def _get_timeframe(self, xmltree):
+        """ Converts 'from' and 'to' parameters in video tag to seconds.
+        If there are no parameters, returns empty string. """
+
+        def parse_time(s):
+            """Converts s in '12:34:45' format to seconds. If s is
+            None, returns empty string"""
+            if s is None:
+                return ''
+            else:
+                x = time.strptime(s, '%H:%M:%S')
+                return datetime.timedelta(hours=x.tm_hour,
+                                      minutes=x.tm_min,
+                                      seconds=x.tm_sec).total_seconds()
+
+        return parse_time(xmltree.get('from')), parse_time(xmltree.get('to'))
+
+    def handle_ajax(self, dispatch, get):
+        """Handle ajax calls to this video.
+        TODO (vshnayder): This is not being called right now, so the
+        position is not being saved.
+        """
+        log.debug(u"GET {0}".format(get))
+        log.debug(u"DISPATCH {0}".format(dispatch))
+        if dispatch == 'goto_position':
+            self.position = int(float(get['position']))
+            log.info(u"NEW POSITION {0}".format(self.position))
+            return json.dumps({'success': True})
+        raise Http404()
+
+    def get_instance_state(self):
+        return json.dumps({'position': self.position})
+
+    def get_html(self):
+        if isinstance(modulestore(), MongoModuleStore):
+            caption_asset_path = StaticContent.get_base_url_path_for_course_assets(self.location) + '/subs_'
+        else:
+            # VS[compat]
+            # cdodge: filesystem static content support.
+            caption_asset_path = "/static/{0}/subs/".format(self.metadata['data_dir'])
+
+        return self.system.render_template('videoalpha.html', {
+            'youtube_streams': self.youtube_streams,
+            'id': self.location.html_id(),
+            'sub': self.sub,
+            'sources': self.sources,
+            'track': self.track,
+            'display_name': self.display_name,
+            # TODO (cpennington): This won't work when we move to data that isn't on the filesystem
+            'data_dir': self.metadata['data_dir'],
+            'caption_asset_path': caption_asset_path,
+            'show_captions': self.show_captions,
+            'start': self.start_time,
+            'end': self.end_time
+        })
+
+
+class VideoAlphaDescriptor(RawDescriptor):
+    module_class = VideoAlphaModule
+    stores_state = True
+    template_dir_name = "videoalpha"

lms/templates/courseware/courseware.html

@@ -32,7 +32,7 @@
   <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
   <script type="text/javascript">
     document.write('\x3Cscript type="text/javascript" src="' +
-        document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
+        document.location.protocol + '//www.youtube.com/iframe_api">\x3C/script>');
   </script>
 
   <script type="text/javascript">
@@ -61,7 +61,7 @@
   </script>
 
 % if timer_expiration_duration:
-  <script type="text/javascript">  
+  <script type="text/javascript">
     var timer = {
       timer_inst : null,
       end_time : null,
@@ -79,8 +79,8 @@
         remaining_secs = remaining_secs % 3600;
         var minutes = pretty_time_string(Math.floor(remaining_secs / 60));
         remaining_secs = remaining_secs % 60;
-        var seconds = pretty_time_string(Math.floor(remaining_secs));      
-       
+        var seconds = pretty_time_string(Math.floor(remaining_secs));
+
         var remainingTimeString = hours + ":" + minutes + ":" + seconds;
         return remainingTimeString;
       },
@@ -100,11 +100,11 @@
       end : function(self) {
         clearInterval(self.timer_inst);
         // redirect to specified URL:
-        window.location = "${time_expired_redirect_url}"; 
+        window.location = "${time_expired_redirect_url}";
       }
-    }  
-    // start timer right away: 
-    timer.start(); 
+    }
+    // start timer right away:
+    timer.start();
   </script>
 % endif
 

lms/templates/videoalpha.html

+% if display_name is not UNDEFINED and display_name is not None:
+  <h2> ${display_name} </h2>
+% endif
+
+%if settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
+  <div id="stub_out_video_for_testing"></div>
+%else:
+  <div
+      id="video_${id}"
+      class="video"
+      data-streams="${youtube_streams}"
+      ${'data-sub="{}"'.format(sub) if sub else ''}
+      ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
+      ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
+      ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
+      data-caption-data-dir="${data_dir}"
+      data-show-captions="${show_captions}"
+      data-start="${start}"
+      data-end="${end}"
+      data-caption-asset-path="${caption_asset_path}"
+  >
+    <div class="tc-wrapper">
+      <article class="video-wrapper">
+        <section class="video-player">
+          <div id="${id}"></div>
+        </section>
+        <section class="video-controls"></section>
+      </article>
+    </div>
+  </div>
+%endif
+
+% if sources.get('main'):
+<div class="video-sources">
+  <p>Download video <a href="${sources.get('main')}">here</a>.</p>
+</div>
+% endif
+
+% if track:
+<div class="video-tracks">
+  <p>Download subtitles <a href="${track}">here</a>.</p>
+</div>
+% endif