Added support for embedding media files from <audio src="..."> and <v…

…ideo src="..."> in the self-contained mode (#355)

Co-authored-by: Yihui Xie <xie@yihui.name>

DESCRIPTION

@@ -28,6 +28,7 @@ Authors@R: c(
     person("Patrick", "Schratz", role = "ctb"),
     person("Paul", "Klemm", role = "ctb", comment = c(ORCID = "0000-0002-5985-1737")),
     person("Paul", "Lemmens", role = "ctb"),
+    person("Robert", "Fromont", role = "ctb", email = "robert.fromont@canterbury.ac.nz", comment = c(ORCID = "0000-0001-5271-5487")),
     person("Sean", "Lopp", role = "ctb"),
     person("Silvia", "Canelon", role = "ctb", comment = c(ORCID = "0000-0003-1709-1394")),
     person("Susan", "VanderPlas", role = "ctb", comment = c(ORCID = "0000-0002-3803-0972")),

NEWS.md

@@ -1,5 +1,6 @@
 # CHANGES IN xaringan VERSION 0.26
 
+- Added support for embedding media files from `<audio src="...">` and `<video src="...">` in the self-contained mode (thanks, @robertfromont, #355).
 
 # CHANGES IN xaringan VERSION 0.25
 

R/utils.R

@@ -216,10 +216,12 @@ encode_images = function(x) {
   # only process prose lines and not code blocks
   if (length(p <- prose_index(x)) == 0) return(x)
   xp = x[p]
-  # opening and closing tags of images and audio files
+  # opening and closing tags of images and other media
   rs = matrix(c(
     '!\\[.*?\\]\\(', '\\)',
     '<img .*?src\\s*=\\s*"', '".*?/>',
+    '<audio .*?src\\s*=\\s*"', '".*?>',
+    '<video .*?src\\s*=\\s*"', '".*?>',
     '<source .*?src\\s*=\\s*"',  '".*?>',
     '^background-image: url\\("?', '"?\\)'
   ), 2)

inst/rmarkdown/templates/xaringan/resources/js/data-uri.js

@@ -1,8 +1,8 @@
 function(data, token) {
   // data is an object of the form { path: base64 data }; we need to move base64
-  // data back to HTML nodes (e.g., into the 'src' attribute of <img>)
+  // data back to HTML nodes (e.g., into the 'src' attribute of <img>, <audio>, <video>, <source>)
   var i, s, d, el, els;
-  els = document.querySelectorAll('img[src^="' + token + '"], source[src^="' + token + '"]');
+  els = document.querySelectorAll(['img', 'audio', 'video', 'source'].map(x => x + '[src^="' + token + '"]').join(','));
   for (i = 0; i < els.length; i++) {
     el = els[i]; s = el.src.replace(token, ''); d = data[s];
     if (d) el.src = d;