Remark: Autoplay video when slide opens

[mikepqr]

I'm currently embedding webm videos with code like

<video loop autoplay controls>
    <source src="video.webm">
</video>

These videos begin autoplaying when the presentation loads. Is there any way to have them begin autoplaying when the _slide_ loads?

This is possible in reveal but I couldn't find similar syntax in the remark documentation.

[unode]

Possible workaround

[nolanlawson]

I'm using the following code, which autoplays all videos from start time 0 when the slide is shown. Works well for me!

  var slideElements

  function getElementForSlide(slide) {
    slideElements = slideElements || document.querySelectorAll('.remark-slide')
    return slideElements[slide.getSlideIndex()]
  }

  slideshow.on('showSlide', function (slide) {
    Array.from(getElementForSlide(slide).querySelectorAll('video')).forEach(function (vid) {
      vid.loop = true
      vid.currentTime = 0
      vid.play()
    })
  })

  slideshow.on('hideSlide', function (slide) {
    Array.from(getElementForSlide(slide).querySelectorAll('video')).forEach(function (vid) {
      vid.pause()
    })
  })

[unode]

Thanks, this is much lighter than the workaround I linked.

This should also be applicable to <audio> tags.
As far as I know they use the same attributes (.loop, .currentTime, .play, .pause, ... ).

.querySelectorAll('video, audio')

seems to do the job.

[Nerdyneer]

@nolanlawson
Where should I add this code?

[abelards]

The question is answered on both links so I'm closing the issue.

[freder]

slightly improved version of @nolanlawson's solution:

• data attribute as autoplay flag
• mute videos in presenter mode

let slideElements;
const body = document.body;
function getElementForSlide(slide) {
    slideElements = slideElements || document.querySelectorAll('.remark-slide');
    return slideElements[slide.getSlideIndex()];
}
slideshow.on('showSlide', (slide) => {
    getElementForSlide(slide).querySelectorAll('video').forEach((vid) => {
        if (body.classList.contains('remark-presenter-mode')) {
            vid.muted = true;
        }
        if (vid.attributes['data-autoplay'].value === 'true') {
            vid.play();
        }
    });
});
slideshow.on('hideSlide', (slide) => {
    getElementForSlide(slide).querySelectorAll('video').forEach((vid) => {
        vid.pause();
    });
});