Replace Flowplayer with the open source Video.js library

pillar/web/nodes/routes.py

@@ -255,7 +255,7 @@ def _view_handler_asset(node, template_path, template_action, link_allowed):
                     # TODO: move this to Pillar
                     if f.backend == 'cdnsun':
                         f.link = "{0}&name={1}.{2}".format(f.link, node.name, f.format)
-            node.video_sources = json.dumps(sources)
+            node.video_sources = sources
             node.file_variations = node_file.variations
         else:
             node.video_sources = None

src/styles/_project.sass

@@ -1032,6 +1032,43 @@ section.node-preview
 	&.video
 		background-color: black
 
+		.video-dummy
+			min-height: 250px
+			img
+				display: block
+				margin: 0 auto
+				position: absolute
+				z-index: 1
+				opacity: .6
+
+			display: flex
+			width: 100%
+			align-items: center
+			justify-content: center
+			color: white
+
+			&-content
+				position: relative
+				z-index: 2
+				display: flex
+				align-items: center
+
+				&-icon
+					font-size: 4em
+
+				&-text
+					font-size: 1.6em
+					span
+						display: block
+					a
+						display: inline-block
+						color: white
+						font-size: .8em
+
+						em
+							font-style: normal
+							color: $color-warning
+
 	&.group, &.project
 		background-color: $color-background
 		@include overlay(rgba($color-background, .3), 0%, transparent, 100%)
@@ -2637,7 +2674,7 @@ section.node-children
 		.toggle
 			margin: 0 20px
 
-@import plugins/_flowplayer
+@import plugins/_videoplayer
 
 
 /* Edit Project specific classes*/

src/templates/nodes/custom/asset/video/view_embed.jade

@@ -4,17 +4,32 @@
 	#node-overlay
 
 	section.node-preview.video
-		#flowplayer_container.is-splash.play-button(
+		| {% if node.video_sources %}
-			style="{% if node.picture %}background-image:url({{node.picture.thumbnail('l', api=api)}}); background-repeat:no-repeat; {% endif %}")
+		video.video-js.vjs-fluid(
-			.fp-startscreen.fp-toggle
+			controls,
-				a.big-play-button
+			data-setup="{}",
-					i.pi-play
+			preload="auto",
-			.fp-endscreen
+			poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}")
-				a.watch-again.fp-toggle
+			| {% for source in node.video_sources %}
-					i.pi-replay
+			source(
-					| Watch again
+				src="{{ source.src }}",
-			.fp-waiting
+				type="{{ source.type }}")
-				i.pi-spin.spin
+			| {% endfor %}
+			p.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>
+		| {% else %}
+		.video-dummy.sorry(
+			style="{% if node.picture %}height: {{ node.picture.height }}px{% endif %}")
+			| {% if node.picture %}
+			img.video-dummy-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}")
+			| {% endif %}
+			.video-dummy-content
+				i.pi-lock.video-dummy-content-icon
+				.video-dummy-content-text
+					span Only available to Blender Cloud subscribers.
+					a(href="{{ url_for('main.join') }}") Support Blender and get awesome stuff. <em>Subscribe now!</em>
+		| {% endif %}
 
 
 	section.node-details-container.video
@@ -131,23 +146,8 @@ script(type="text/javascript").
 		var content_type = $("li.node-details-meta-list-item.type").text();
 		$("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1));
 
-		var container = document.getElementById("flowplayer_container");
-
-		flowplayer(container, {
-			key: "{{config.FLOWPLAYER_KEY}}",
-			embed: false,
-			splash: true,
-			{% if node.video_sources %}
-			clip: {
-				sources: {{ node.video_sources | safe }}
-			}
-			{% else %}
-			disabled: true
-			{% endif %}
-		});
-
 		{% if not node.video_sources %}
-		$('#flowplayer_container, .sorry').click(function() {
+		$('.sorry').click(function() {
 			$.get('/403', function(data) {
 				$('#node-overlay').html(data).addClass('active');
 			})

src/templates/projects/view.jade

@@ -235,7 +235,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css', v
 
 | {% block footer_scripts %}
 script(src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js")
-script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js")
+script(src="//vjs.zencdn.net/5.8.8/video.js")
 
 | {% if project.has_method('PUT') %}
 | {# JS containing the Edit, Add, Featured, and Move functions #}