fetch transcript for html5 with youtubeId if 404

common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js

@@ -622,6 +622,49 @@
                 expect(Caption.hideSubtitlesEl).toBeHidden();
             });
 
+            msg = 'on error: for Html5 player an attempt to fetch transcript ' +
+                    'with youtubeId if there are no additional transcripts';
+            it(msg, function () {
+                spyOn(Caption, 'fetchAvailableTranslations');
+                spyOn(Caption, 'fetchCaption').andCallThrough();
+                $.ajax.andCallFake(function (settings) {
+                    _.result(settings, 'error');
+                });
+
+                state.config.transcriptLanguages = {};
+                state.videoType = 'html5';
+
+                Caption.fetchCaption();
+
+                expect(Caption.fetchAvailableTranslations).not.toHaveBeenCalled();
+                expect($.ajaxWithPrefix.mostRecentCall.args[0]['data'])
+                    .toEqual({'videoId':'Z5KLxerq05Y'});
+                expect(Caption.hideCaptions.mostRecentCall.args)
+                    .toEqual([true, false]);
+                expect(Caption.fetchCaption.mostRecentCall.args[0]).toEqual(true);
+                expect(Caption.fetchCaption.callCount).toEqual(2);
+            });
+
+            msg = 'on success: when fetchCaption called with fetch_with_youtubeId to ' +
+                    'get transcript with youtubeId for html5';
+            it(msg, function () {
+                spyOn(Caption, 'fetchAvailableTranslations');
+                spyOn(Caption, 'fetchCaption').andCallThrough();
+
+                Caption.loaded = true;
+                state.config.transcriptLanguages = {};
+                state.videoType = 'html5';
+
+                Caption.fetchCaption(true);
+
+                expect(Caption.fetchAvailableTranslations).not.toHaveBeenCalled();
+                expect($.ajaxWithPrefix.mostRecentCall.args[0]['data'])
+                    .toEqual({'videoId':'Z5KLxerq05Y'});
+                expect(Caption.hideCaptions).toHaveBeenCalledWith(false);
+                expect(Caption.fetchCaption.mostRecentCall.args[0]).toEqual(true);
+                expect(Caption.fetchCaption.callCount).toEqual(1);
+            });
+
             msg = 'on error: fetch available translations if there are ' +
                     'additional transcripts';
             xit(msg, function () {

common/lib/xmodule/xmodule/js/src/video/09_video_caption.js

@@ -271,7 +271,7 @@ function (Sjson, AsyncProcess) {
         /**
         * @desc Fetch the caption file specified by the user. Upon successful
         *     receipt of the file, the captions will be rendered.
-        *
+        * @param {boolean} [fetchWithYoutubeId] Fetch youtube captions if true.
         * @returns {boolean}
         *     true: The user specified a caption file. NOTE: if an error happens
         *         while the specified file is being retrieved (for example the
@@ -280,7 +280,7 @@ function (Sjson, AsyncProcess) {
         *     false: No caption file was specified, or an empty string was
         *         specified for the Youtube type player.
         */
-        fetchCaption: function () {
+        fetchCaption: function (fetchWithYoutubeId) {
             var self = this,
                 state = this.state,
                 language = state.getCurrentLanguage(),
@@ -295,8 +295,12 @@ function (Sjson, AsyncProcess) {
                 this.fetchXHR.abort();
             }
 
-            if (state.videoType === 'youtube') {
-                youtubeId = state.youtubeId('1.0');
+            if (state.videoType === 'youtube' || fetchWithYoutubeId) {
+                try {
+                    youtubeId = state.youtubeId('1.0');
+                } catch (err) {
+                    youtubeId = null;
+                }
 
                 if (!youtubeId) {
                     return false;
@@ -350,8 +354,14 @@ function (Sjson, AsyncProcess) {
                     );
                     // If initial list of languages has more than 1 item, check
                     // for availability other transcripts.
+                    // If player mode is html5 and there are no initial languages
+                    // then try to fetch youtube version of transcript with
+                    // youtubeId.
                     if (_.keys(state.config.transcriptLanguages).length > 1) {
                         self.fetchAvailableTranslations();
+                    } else if (!fetchWithYoutubeId && state.videoType === 'html5') {
+                        console.log('[Video info]: Html5 mode fetching caption with youtubeId.');
+                        self.fetchCaption(true);
                     } else {
                         self.hideCaptions(true, false);
                         self.hideSubtitlesEl.hide();

common/test/acceptance/tests/video/test_video_module.py

@@ -404,6 +404,35 @@ class YouTubeVideoTest(VideoBaseTest):
 
         self.assertTrue(self.video.is_video_rendered('html5'))
 
+    def test_html5_video_rendered_with_youtube_captions(self):
+        """
+        Scenario: User should see Youtube captions for If there are no transcripts
+        available for HTML5 mode
+        Given that I have uploaded a .srt.sjson file to assets for Youtube mode
+        And the YouTube API is blocked
+        And the course has a Video component in "Youtube_HTML5" mode
+        And Video component rendered in HTML5 mode
+        And Html5 mode video has no transcripts
+        When I see the captions for HTML5 mode video
+        Then I should see the Youtube captions
+        """
+        self.assets.append('subs_3_yD_cEKoCk.srt.sjson')
+        # configure youtube server
+        self.youtube_configuration.update({
+            'time_to_response': 2.0,
+            'youtube_api_blocked': True,
+        })
+
+        data = {'sub': '3_yD_cEKoCk'}
+        self.metadata = self.metadata_for_mode('youtube_html5', additional_data=data)
+
+        self.navigate_to_video()
+
+        self.assertTrue(self.video.is_video_rendered('html5'))
+        # check if caption button is visible
+        self.assertTrue(self.video.is_button_shown('CC'))
+        self._verify_caption_text('Welcome to edX.')
+
     def test_download_transcript_button_works_correctly(self):
         """
         Scenario: Download Transcript button works correctly