Is it possible to use data-uri for data-background-video?

[jeertmans]

Hello!

I have tried, without success, to use a data-uri video as source for my background video. As I failed to have a working example, is it me, or is it simply impossible to have data-uri as source for background videos?

For background images, it works.

[jeertmans]

Hello @hakimel, a small up in case you did not see this discussion :-)

[t-fritsch]

Hi @jeertmans,

when you provide a data-background-video with a comma in it, reveal uses it as "multiple sources" video, as mentioned in the doc here : https://revealjs.com/backgrounds/#video-backgrounds

data-background-video |   | A single video source, or a comma separated list of video sources.

In your situation, as a data-uri also contains a comma (data:video/webm;base64,........) you end up with two non-working sources, like this :

[t-fritsch]

As a workaround you can dynamically merge the two <source> src inside the first one like this :

Reveal.on( 'slidechanged', event => {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
    if (event.currentSlide.getAttribute('data-background-video')) {
        const background = Reveal.getSlideBackground(event.indexh, event.indexv),
            videoSources = background.querySelectorAll('video>source');

        videoSources.forEach((source, i) => {
            const src = source.getAttribute('src');
            if(src.match(/^data:video.*;base64$/)){
                const nextSrc = videoSources[i+1]?.getAttribute('src');
                source.setAttribute('src', `${src},${nextSrc}`);
            }
        });
    }
} );

[jeertmans]

Thanks! Did you check if it works? Because I cannot make it work on my side... This window keeps loading forever :/

On top, your callback does not seem to be called on the first slide (and changing pages does not make it work, but the callback is properly called).

[t-fritsch]

Yes it is working well on my side, don't you have any JS error in the console ?

when you say

This window keeps loading forever :/

what do you mean exactly ?
if you provide a codesandbox/jsfiddle/codepen that allows to reproduce, I maybe can help

[jeertmans]

There you go: https://jsfiddle.net/hrtfa8zo/.
The example is not quite trivial, because this is automatically generated via a tool I developed. When using filepath as src, everything works fine, but not with data uri.

what do you mean exactly ?

[t-fritsch]

thank you for the jsfiddle, it is strange that it works well on my side and not in this fiddle, my supposition is that it's because I use markdown plugin and you use plain html slides, it may impact the order in which everything is parsed/displayed 🤷‍♂️

Anyway, I managed to fix the snippet by setting the src attribute on the <video> element instead of the <source> tag. This is also the recommended way to do so (https://stackoverflow.com/a/27934769).
This way it works fine :

https://jsfiddle.net/kzpqxv94/1/

I also updated the code to make it work on first load (it was working on my side but again maybe because I use markdown).

function fixBase64VideoBackground(event) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
    if (event.currentSlide.getAttribute('data-background-video')) {
        const background = Reveal.getSlideBackground(event.indexh, event.indexv),
            video = background.querySelector('video'),
            sources = video.querySelectorAll('source');

        sources.forEach((source, i) => {
            const src = source.getAttribute('src');
            if(src.match(/^data:video.*;base64$/)){
                const nextSrc = sources[i+1]?.getAttribute('src');
                video.setAttribute('src', `${src},${nextSrc}`);
            }
        });
    }
}
Reveal.on( 'ready', fixBase64VideoBackground );
Reveal.on( 'slidechanged', fixBase64VideoBackground );

[jeertmans]

Thanks! Your fix is game changing for me! I will finally be able to move on, some other feature that required using base64 encoded videos :D

[t-fritsch]

you're welcome, I'm happy I could help ! 🙂

[Rapsssito]

For others who are interested in a similar solution, I share my solution below (adapted from @t-fritsch). The advantage is that this solution is only executed once at the beginning of the presentation and thus micro-stuttering does not occur when changing slides (which were the result of the constant updating of the video "src" when a new slide is presented).

      function setVideoBase64(video) {
        const sources = video.querySelectorAll('source');
        // Update the source of the video
        sources.forEach((source, i) => {
          const src = source.getAttribute('src');
          if(src.match(/^data:video.*;base64$/)) {
            const nextSrc = sources[i+1]?.getAttribute('src');
            video.setAttribute('src', `${src},${nextSrc}`);
          }
        });
      }

      function fixBase64VideoBackground(event) {
        // Analyze all slides backgrounds
        for (const slide of Reveal.getBackgroundsElement().querySelectorAll('.slide-background')) {
          // Get the slide video and its sources for each background
          const video = slide.querySelector('video');
          if (video) {
            setVideoBase64(video);
          } else {
            // Listen to the creation of the video element
            const observer = new MutationObserver((mutationsList) => {
              for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                  for (const addedNode of mutation.addedNodes) {
                    if (addedNode.tagName === 'VIDEO') {
                      setVideoBase64(addedNode);
                      observer.disconnect(); // Stop observing once the video is handled
                    }
                  }
                }
              }
            });
            observer.observe(slide, { childList: true, subtree: true });
          }
        }
      }
      // Setup base64 videos
      Reveal.on( 'ready', fixBase64VideoBackground );

[jeertmans]

@Rapsssito thanks for sharing! Feel free to make a PR to update the current patch present in the default template :)