diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 6f004b9657..66744fa8c8 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -9,6 +9,8 @@ Studio: Add drag-and-drop support to the container page. STUD-1309. Common: Add extensible third-party auth module. +Blades: Added new error message that displays when HTML5 video is not supported altogether. Make sure spinner gets hidden when error message is shown. BLD-638. + LMS: Switch default instructor dashboard to the new (formerly "beta") instructor dashboard. Puts the old (now "legacy") dash behind a feature flag. LMS-1296 diff --git a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js index a865c8655f..79a7d92078 100644 --- a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js +++ b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js @@ -301,6 +301,7 @@ function (VideoPlayer, VideoStorage) { // TODO: use 1 class to work with. state.el.find('.video-player div').addClass('hidden'); state.el.find('.video-player h3').removeClass('hidden'); + _hideWaitPlaceholder(state); console.log( '[Video info]: Non-youtube video sources aren\'t available.' @@ -673,6 +674,15 @@ function (VideoPlayer, VideoStorage) { } } }); + + // None of the supported video formats can be played. Hide the spinner. + if (!(_.compact(_.values(this.html5Sources)))) { + _hideWaitPlaceholder(state); + console.log( + '[Video info]: This browser cannot play .mp4, .ogg, or .webm ' + + 'files' + ); + } } // function fetchMetadata() diff --git a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js index 324ca8c965..5dd6f321e4 100644 --- a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js +++ b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js @@ -216,7 +216,10 @@ function () { // video element via jquery (http://bugs.jquery.com/ticket/9174) we // create it using native JS. this.video = document.createElement('video'); - this.video.innerHTML = _.values(sourceStr).join(''); + errorMessage = gettext('This browser cannot play .mp4, .ogg, or ' + + '.webm files. Try using a different browser, such as Google ' + + 'Chrome.'); + this.video.innerHTML = _.values(sourceStr).join('') + errorMessage; // Get the jQuery object, and set the player state to UNSTARTED. // The player state is used by other parts of the VideoPlayer to diff --git a/common/test/acceptance/pages/lms/video.py b/common/test/acceptance/pages/lms/video.py index 40e93cd3f8..2851d4c399 100644 --- a/common/test/acceptance/pages/lms/video.py +++ b/common/test/acceptance/pages/lms/video.py @@ -217,6 +217,20 @@ class VideoPage(PageObject): selector = self.get_element_selector(video_display_name, CSS_CLASS_NAMES['error_message']) return self.q(css=selector).visible + def is_spinner_shown(self, video_display_name=None): + """ + Checks if video spinner shown. + + Arguments: + video_display_name (str or None): Display name of a Video. + + Returns: + bool: Tells about spinner visibility. + + """ + selector = self.get_element_selector(video_display_name, CSS_CLASS_NAMES['video_spinner']) + return self.q(css=selector).visible + @property def error_message_text(self, video_display_name=None): """ diff --git a/common/test/acceptance/tests/test_video_module.py b/common/test/acceptance/tests/test_video_module.py index e0caee264f..523010a676 100644 --- a/common/test/acceptance/tests/test_video_module.py +++ b/common/test/acceptance/tests/test_video_module.py @@ -577,9 +577,12 @@ class Html5VideoTest(VideoBaseTest): self.assertTrue(self.video.is_error_message_shown) # Verify that error message has correct text - correct_error_message_text = 'ERROR: No playable video sources found!' + correct_error_message_text = 'No playable video sources found.' self.assertIn(correct_error_message_text, self.video.error_message_text) + # Verify that spinner is not shown + self.assertFalse(self.video.is_spinner_shown()) + def test_download_button_wo_english_transcript(self): """ Scenario: Download button works correctly w/o english transcript in HTML5 mode diff --git a/lms/templates/video.html b/lms/templates/video.html index 9aeb1fe895..8791ffbbf7 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -60,7 +60,7 @@