diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index e8aba4d671..43b024ec32 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -355,6 +355,34 @@ div.video { } } + a.quality_control { + background: url(../images/hd.png) center no-repeat; + border-right: 1px solid #000; + @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); + color: #797979; + display: block; + float: left; + line-height: 46px; //height of play pause buttons + margin-left: 0; + padding: 0 lh(.5); + text-indent: -9999px; + @include transition(); + width: 30px; + + &:hover { + background-color: #444; + color: #fff; + text-decoration: none; + } + + &.active { + background-color: #F44; + color: #0ff; + text-decoration: none; + } + } + + a.hide-subtitles { background: url('../images/cc.png') center no-repeat; color: #797979; diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee index b1e41afc3c..cdd74c5d07 100644 --- a/common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee +++ b/common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee @@ -22,7 +22,7 @@ class @VideoCaption extends Subview """ @$('.video-controls .secondary-controls').append """ Captions - """ + """#" @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5 @fetchCaption() @@ -144,7 +144,7 @@ class @VideoCaption extends Subview @el.removeClass('closed') @scrollCaption() $.cookie('hide_captions', hide_captions, expires: 3650, path: '/') - + captionHeight: -> if @el.hasClass('fullscreen') $(window).height() - @$('.video-controls').height() diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_control.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_control.coffee index 5053f1dcb1..856549c3e2 100644 --- a/common/lib/xmodule/xmodule/js/src/video/display/video_control.coffee +++ b/common/lib/xmodule/xmodule/js/src/video/display/video_control.coffee @@ -16,7 +16,7 @@ class @VideoControl extends Subview Fill Browser - """ + """#" unless onTouchBasedDevice() @$('.video_control').addClass('play').html('Play') diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee index bb89def63d..8829e25dac 100644 --- a/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee +++ b/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee @@ -9,6 +9,7 @@ class @VideoPlayer extends Subview bind: -> $(@control).bind('play', @play) .bind('pause', @pause) + $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange) $(@caption).bind('seek', @onSeek) $(@speedControl).bind('speedChange', @onSpeedChange) $(@progressSlider).bind('seek', @onSeek) @@ -25,6 +26,7 @@ class @VideoPlayer extends Subview render: -> @control = new VideoControl el: @$('.video-controls') + @qualityControl = new VideoQualityControl el: @$('.secondary-controls') @caption = new VideoCaption el: @el youtubeId: @video.youtubeId('1.0') @@ -41,10 +43,12 @@ class @VideoPlayer extends Subview rel: 0 showinfo: 0 enablejsapi: 1 + modestbranding: 1 videoId: @video.youtubeId() events: onReady: @onReady onStateChange: @onStateChange + onPlaybackQualityChange: @onPlaybackQualityChange @caption.hideCaptions(@['video'].hide_captions) addToolTip: -> @@ -53,7 +57,7 @@ class @VideoPlayer extends Subview my: 'top right' at: 'top center' - onReady: => + onReady: (event) => unless onTouchBasedDevice() $('.video-load-complete:first').data('video').player.play() @@ -68,6 +72,13 @@ class @VideoPlayer extends Subview when YT.PlayerState.ENDED @onEnded() + onPlaybackQualityChange: (event, value) => + quality = @player.getPlaybackQuality() + @qualityControl.onQualityChange(quality) + + handlePlaybackQualityChange: (event, value) => + @player.setPlaybackQuality(value) + onUnstarted: => @control.pause() @caption.pause() diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_quality_control.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_quality_control.coffee new file mode 100644 index 0000000000..f8f6167075 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/video/display/video_quality_control.coffee @@ -0,0 +1,26 @@ +class @VideoQualityControl extends Subview + initialize: -> + @quality = null; + + bind: -> + @$('.quality_control').click @toggleQuality + + render: -> + @el.append """ + HD + """#" + + 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 diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_volume_control.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_volume_control.coffee index 10d3f6b044..096b50042d 100644 --- a/common/lib/xmodule/xmodule/js/src/video/display/video_volume_control.coffee +++ b/common/lib/xmodule/xmodule/js/src/video/display/video_volume_control.coffee @@ -17,7 +17,7 @@ class @VideoVolumeControl extends Subview
- """ + """#" @slider = @$('.volume-slider').slider orientation: "vertical" range: "min" diff --git a/common/static/images/hd.png b/common/static/images/hd.png new file mode 100644 index 0000000000..d6b8c1b7d1 Binary files /dev/null and b/common/static/images/hd.png differ