Possibly address the videos issues at #1074 once and for all...

thexerteproject · May 5, 2022 · ffad6c0 · ffad6c0
1 parent f2e1be2
commit ffad6c0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -3609,6 +3609,18 @@ function x_isYouTubeVimeo(url) {
 	}
 }
 
+// Based somewhat on these regexps for YouTube and Vimeo (check there for updates)
+//   https://stackoverflow.com/questions/19377262/regex-for-youtube-url
+//   https://stackoverflow.com/questions/5008609/vimeo-video-link-regex
+function x_fixYouTubeVimeo(url) {
+	var path = url.trim();
+	let result = url.match(/(^|<iframe.+?src=["'])((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?.*?(<\/iframe>|$)$/);
+	if (result) return "www.youtube.com/watch?v=" + result[7];
+	result = url.match(/(^|<iframe.+?src=["'])(?:http|https)?:?\/?\/?(?:www\.)?(?:player\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|video\/|)(\d+)(?:|\/\?).*?(<\/iframe>|$)/);
+	if (result) return "vimeo.com/" + result[2];
+	return url;
+}
+
 // strip html tags and return just text which is appropriate for screen reader
 function x_getAriaText(text) {
 	return $('<p>' + text + '</p>').text();

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/interactiveVideo.html b/modules/xerte/parent_templates/Nottingham/models_html5/interactiveVideo.html
@@ -701,7 +701,7 @@
                         {	tip: mediaPanelData.attr("tip"),
                             width: mediaPanelData.attr("width"),
                             height: mediaPanelData.attr("height"),
-                            media: mediaPanelData.attr("media"),
+                            media: x_fixYouTubeVimeo(mediaPanelData.attr("media")),
                             autoplay: mediaPanelData.attr("autoplay"),
                             aspect: mediaPanelData.attr("aspect"),
                             transcript: mediaPanelData.attr("transcript"),

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/mediaLesson.html b/modules/xerte/parent_templates/Nottingham/models_html5/mediaLesson.html
@@ -652,7 +652,7 @@
 					{	tip: mediaPanelData.attr("tip"),
 						width: mediaPanelData.attr("width"),
 						height: mediaPanelData.attr("height"),
-						media: mediaPanelData.attr("media"),
+						media: x_fixYouTubeVimeo(mediaPanelData.attr("media")),
 						autoplay: mediaPanelData.attr("autoplay"),
 						aspect: mediaPanelData.attr("aspect"),
 						transcript: mediaPanelData.attr("transcript"),
@@ -885,6 +885,7 @@
 				var $myVideo = $('<div class="' + classes + '"/>').appendTo($mediaHolder);
 
 				// is it from youtube or vimeo?
+				mediaData.media = x_fixYouTubeVimeo(mediaData.media);
 				if (mediaData.media.indexOf("www.youtube.com") != -1 || mediaData.media.indexOf("//youtu") != -1) {
 					var $youTube = $holder.find(".popcornMedia").addClass("youTube");
 					$youTube.attr("aspect", mediaData.aspect);
@@ -922,7 +923,7 @@
 						.css("margin", "0 auto")
 						.mediaPlayer({
 							type		:"video",
-							source		:mediaData.media,
+							source		:x_fixYouTubeVimeo(mediaData.media),
 							width		:"100%",
 							height		:"100%",
 							autoPlay	:mediaData.autoplay,

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html b/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html
@@ -107,7 +107,7 @@
 			}
 
 			var $pageVideo = $("#pageVideo"),
-				videoSrc = x_currentPageXML.getAttribute("url");
+				videoSrc = x_fixYouTubeVimeo(x_currentPageXML.getAttribute("url"));
 
 			if (videoSrc.substr(0,7) == "<iframe") {
 				$("#pageContents .panel").removeClass("panel inline");

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html b/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html
@@ -152,7 +152,7 @@
 
 			var videoSrc = x_currentPageXML.getAttribute("url");
 			$pageVideo.data({
-				"src"			:videoSrc,
+				"src"			:x_fixYouTubeVimeo(videoSrc),
 				"dimensions"	:videoDimensions
 			});