Merge pull request #3631 from edx/jmclaus/bugfix_display_specific_error_message_when_HTML5_video_not_supported

Added new error message that displays when HTML5 video is not supported. [BLD-638]

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

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()

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

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):
         """

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

lms/templates/video.html

@@ -60,7 +60,7 @@
           <div class="video-player-pre"></div>
           <section class="video-player">
               <div id="${id}"></div>
-              <h3 class="hidden">${_('ERROR: No playable video sources found!')}</h3>
+              <h3 class="hidden">${_('No playable video sources found.')}</h3>
           </section>
           <div class="video-player-post"></div>
           <section class="video-controls is-hidden">