Added new error message that displays when HTML5 video is not supported…

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]

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