diff --git a/static/coffee/spec/modules/video/video_control_spec.coffee b/static/coffee/spec/modules/video/video_control_spec.coffee
index a912abb2d0..0c8615b8f7 100644
--- a/static/coffee/spec/modules/video/video_control_spec.coffee
+++ b/static/coffee/spec/modules/video/video_control_spec.coffee
@@ -1,17 +1,16 @@
describe 'VideoControl', ->
beforeEach ->
@player = jasmine.stubVideoPlayer @
+ $('.video-controls').html ''
describe 'constructor', ->
- beforeEach ->
- @control = new VideoControl @player
-
it 'render the video controls', ->
+ new VideoControl @player
expect($('.video-controls').html()).toContain '''
- - Play
+ - Play
-
0:00 / 0:00
@@ -23,12 +22,33 @@ describe 'VideoControl', ->
'''
it 'bind player events', ->
- expect($(@player)).toHandleWith 'play', @control.onPlay
- expect($(@player)).toHandleWith 'pause', @control.onPause
- expect($(@player)).toHandleWith 'ended', @control.onPause
+ control = new VideoControl @player
+ expect($(@player)).toHandleWith 'play', control.onPlay
+ expect($(@player)).toHandleWith 'pause', control.onPause
+ expect($(@player)).toHandleWith 'ended', control.onPause
it 'bind the playback button', ->
- expect($('.video_control')).toHandleWith 'click', @control.togglePlayback
+ control = new VideoControl @player
+ expect($('.video_control')).toHandleWith 'click', control.togglePlayback
+
+ describe 'when on a touch based device', ->
+ beforeEach ->
+ spyOn(window, 'onTouchBasedDevice').andReturn true
+
+ it 'does not add the play class to video control', ->
+ new VideoControl @player
+ expect($('.video_control')).not.toHaveClass 'play'
+ expect($('.video_control')).not.toHaveHtml 'Play'
+
+
+ describe 'when on a non-touch based device', ->
+ beforeEach ->
+ spyOn(window, 'onTouchBasedDevice').andReturn false
+
+ it 'add the play class to video control', ->
+ new VideoControl @player
+ expect($('.video_control')).toHaveClass 'play'
+ expect($('.video_control')).toHaveHtml 'Play'
describe 'onPlay', ->
beforeEach ->
@@ -54,20 +74,47 @@ describe 'VideoControl', ->
beforeEach ->
@control = new VideoControl @player
- describe 'when the video is playing', ->
+ describe 'when the control does not have play or pause class', ->
beforeEach ->
- spyOn(@player, 'isPlaying').andReturn true
- spyOnEvent @player, 'pause'
- @control.togglePlayback jQuery.Event('click')
+ $('.video_control').removeClass('play').removeClass('pause')
- it 'trigger the pause event', ->
- expect('pause').toHaveBeenTriggeredOn @player
+ describe 'when the video is playing', ->
+ beforeEach ->
+ spyOn(@player, 'isPlaying').andReturn true
+ spyOnEvent @player, 'pause'
+ @control.togglePlayback jQuery.Event('click')
- describe 'when the video is paused', ->
- beforeEach ->
- spyOn(@player, 'isPlaying').andReturn false
- spyOnEvent @player, 'play'
- @control.togglePlayback jQuery.Event('click')
+ it 'does not trigger the pause event', ->
+ expect('pause').not.toHaveBeenTriggeredOn @player
- it 'trigger the play event', ->
- expect('play').toHaveBeenTriggeredOn @player
+ describe 'when the video is paused', ->
+ beforeEach ->
+ spyOn(@player, 'isPlaying').andReturn false
+ spyOnEvent @player, 'play'
+ @control.togglePlayback jQuery.Event('click')
+
+ it 'does not trigger the play event', ->
+ expect('play').not.toHaveBeenTriggeredOn @player
+
+ for className in ['play', 'pause']
+ describe "when the control has #{className} class", ->
+ beforeEach ->
+ $('.video_control').addClass className
+
+ describe 'when the video is playing', ->
+ beforeEach ->
+ spyOn(@player, 'isPlaying').andReturn true
+ spyOnEvent @player, 'pause'
+ @control.togglePlayback jQuery.Event('click')
+
+ it 'trigger the pause event', ->
+ expect('pause').toHaveBeenTriggeredOn @player
+
+ describe 'when the video is paused', ->
+ beforeEach ->
+ spyOn(@player, 'isPlaying').andReturn false
+ spyOnEvent @player, 'play'
+ @control.togglePlayback jQuery.Event('click')
+
+ it 'trigger the play event', ->
+ expect('play').toHaveBeenTriggeredOn @player
diff --git a/static/coffee/src/modules/video/video_control.coffee b/static/coffee/src/modules/video/video_control.coffee
index c9bbf95c0a..0c303fc4ad 100644
--- a/static/coffee/src/modules/video/video_control.coffee
+++ b/static/coffee/src/modules/video/video_control.coffee
@@ -17,7 +17,7 @@ class @VideoControl
- """
+ """
+
+ unless onTouchBasedDevice()
+ @$('.video_control').addClass('play').html('Play')
onPlay: =>
@$('.video_control').removeClass('play').addClass('pause').html('Pause')
@@ -36,7 +39,8 @@ class @VideoControl
togglePlayback: (event) =>
event.preventDefault()
- if @player.isPlaying()
- $(@player).trigger('pause')
- else
- $(@player).trigger('play')
+ if $('.video_control').hasClass('play') || $('.video_control').hasClass('pause')
+ if @player.isPlaying()
+ $(@player).trigger('pause')
+ else
+ $(@player).trigger('play')