serve simple webm as fallback for multiquality player

2 files changed, 28 insertions, 12 deletions

diff --git a/model/Stream.php b/model/Stream.php
index 99abaf1..1c63227 100644
--- a/model/Stream.php
+++ b/model/Stream.php
@@ -123,15 +123,19 @@ class Stream
 		]);
 	}
 
-	public function getVideoUrl($proto)
+	public function getVideoUrl($proto, $selection=null)
 	{
+		if (!$selection) {
+			$selection = $this->getSelection();
+		}
+
 		switch($proto)
 		{
 			case 'webm':
-				return proto().'://cdn.c3voc.de/'.rawurlencode($this->getRoom()->getStream()).'_'.rawurlencode($this->getLanguage()).'_'.rawurlencode($this->getSelection()).'.webm';
+				return proto().'://cdn.c3voc.de/'.rawurlencode($this->getRoom()->getStream()).'_'.rawurlencode($this->getLanguage()).'_'.rawurlencode($selection).'.webm';
 
 			case 'hls':
-				return proto().'://cdn.c3voc.de/hls/'.rawurlencode($this->getRoom()->getStream()).'_'.rawurlencode($this->getLanguage()).'_'.rawurlencode($this->getSelection()).'.m3u8';
+				return proto().'://cdn.c3voc.de/hls/'.rawurlencode($this->getRoom()->getStream()).'_'.rawurlencode($this->getLanguage()).'_'.rawurlencode($selection).'.m3u8';
 		}
 
 		return null;
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index ddfc48a..f447c09 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -36,9 +36,9 @@
 		});
 	}
 
-	var createPlayer = function(url) {
-		var player = new Clappr.Player({
-			source: url,
+	var createPlayer = function(sources) {
+		return new Clappr.Player({
+			sources: sources,
 			width: "100%",
 			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
 			shakaConfiguration: {
@@ -74,12 +74,24 @@
 		});
 	}
 
-	// Detect WebM capability, Select relay, Create player
-	var hasWebM = document.createElement('video').canPlayType('video/webm') != "";
-	var cdnUrl = hasWebM ? '<?=h($room->getDashManifestUrl())?>' : '<?=h($room->getHLSPlaylistUrl())?>';
-	selectRelay(cdnUrl, function(relayUrl) {
-		createPlayer(relayUrl);
-	});
+	var hasMSE = 'MediaSource' in window,
+		hasWebM = document.createElement('video').canPlayType('video/webm') != "",
+		nativeHLS = document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "";
+
+	// Play Multiquality only if supported
+	if (hasMSE || nativeHLS) {
+		// Detect WebM capability, Select relay, Create player
+		var cdnUrl = hasWebM ? '<?=h($room->getDashManifestUrl())?>' : '<?=h($room->getHLSPlaylistUrl())?>';
+		selectRelay(cdnUrl, function(relayUrl) {
+			createPlayer([{source: relayUrl}]);
+		});
+	} else {
+		// Default to simple WebM playback
+		var player = createPlayer([{
+			source: "<?=h($stream->getVideoUrl('webm', 'hd'))?>",
+			mimeType: "video/webm"
+		}]);
+	}
 }());
 </script>