Added rudimentary support for Video.js and Chromecast

common/lib/xmodule/xmodule/js/src/video/video_player.js

+// FIXME The Chromecast plugin seems to be loading this for us.
+// import videojs from 'video.js';
+import 'videojs-chromecast/es5/js/videojs-chromecast';
+// FIXME: This causes issues on iOS browsers (Chrome and Safari). The video never plays.
+// The loading indicator spins indefinitely.
+// import 'videojs-contrib-hls';

common/lib/xmodule/xmodule/video_module/video_module.py

@@ -379,7 +379,8 @@ class VideoModule(VideoFields, VideoTranscriptsMixin, VideoStudentViewHandlers,
             'transcript_download_formats_list': self.descriptor.fields['transcript_download_format'].values,
             'license': getattr(self, "license", None),
         }
-        return self.system.render_template('video.html', context)
+        # TODO Put this behind a feature flag
+        return self.system.render_template('videojs.html', context)
 
 
 @XBlock.wants("request_cache")

lms/templates/videojs.html

+<%page expression_filter="h"/>
+
+<%namespace name='static' file='static_content.html'/>
+<%!
+    import json
+    import six
+    from django.utils.translation import ugettext as _
+%>
+% if display_name is not UNDEFINED and display_name is not None:
+    <h3 class="hd hd-2">${display_name}</h3>
+% endif
+
+<%
+    parsed_metadata = json.loads(metadata)
+    # TODO Get poster for non-YouTube videos
+    poster = 'https://rawgit.com/edx/ecommerce-scripts/16c87ec30fc0bc189fd73a94b296dc82d63be31a/roku/a-taste.jpg'
+%>
+
+## The 6.x CSS is being broken by the Chromecast plugin. See https://github.com/videojs/video.js/issues/4423.
+<link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
+<link href="https://cdn.rawgit.com/benjipott/video.js-chromecast/04f5f12f/dist/videojs-chromecast.css" rel="stylesheet">
+
+<style>
+    .video-js .vjs-big-play-button {
+        display: none;
+    }
+
+    .video-js .vjs-control-bar {
+        display: flex;
+    }
+
+    .vjs-tech-chromecast .casting-overlay .casting-information .casting-icon {
+        float: none;
+    }
+</style>
+
+<video class="video-js" controls preload="auto" poster="${poster}" data-setup="{}">
+    % for source in parsed_metadata['sources']:
+        <source src="${source}">
+    % endfor
+    ## NOTE: Only WebVTT files are supported
+    % for code, language in six.iteritems(parsed_metadata['transcriptLanguages']):
+    <track kind="captions" src="${parsed_metadata['transcriptTranslationUrl'].replace('__lang__', code)}"
+           srclang="${code}" label="${language}" default>
+% endfor
+    <p class="vjs-no-js">
+        To view this video please enable JavaScript, and consider upgrading to a web browser that
+        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+    </p>
+</video>
+
+
+<script type="text/javascript"
+        src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
+<%static:webpack entry="VideoModule"></%static:webpack>

package.json

@@ -37,6 +37,7 @@
     "webpack-bundle-tracker": "^0.2.0"
   },
   "devDependencies": {
+    "@edx/stylelint-config-edx": "^1.1.0",
     "edx-custom-a11y-rules": "0.1.3",
     "eslint-config-edx": "^3.0.0",
     "eslint-config-edx-es5": "^2.0.0",
@@ -51,9 +52,9 @@
     "karma-jasmine-html-reporter": "^0.2.0",
     "karma-junit-reporter": "^0.4.1",
     "karma-requirejs": "^0.2.6",
+    "karma-selenium-webdriver-launcher": "^0.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.20",
-    "karma-selenium-webdriver-launcher": "^0.0.4",
     "karma-webpack": "^2.0.3",
     "pa11y": "4.0.1",
     "pa11y-reporter-json-oldnode": "1.0.0",
@@ -61,7 +62,9 @@
     "selenium-webdriver": "3.4.0",
     "sinon": "2.3.5",
     "squirejs": "^0.1.0",
-    "@edx/stylelint-config-edx": "^1.1.0",
-    "stylelint-formatter-pretty": "^1.0.3"
+    "stylelint-formatter-pretty": "^1.0.3",
+    "video.js": "^6.2.7",
+    "videojs-chromecast": "^2.0.8",
+    "videojs-contrib-hls": "^5.11.0"
   }
 }

webpack.config.js

@@ -30,7 +30,8 @@ var wpconfig = {
         CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
         Enrollment: './openedx/features/course_experience/static/course_experience/js/Enrollment.js',
         LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
-        WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js'
+        WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js',
+        VideoModule: './common/lib/xmodule/xmodule/js/src/video/video_player.js'
     },
 
     output: {