Autoplay video when slide opens #322
Comments
|
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()
})
}) |
|
Thanks, this is much lighter than the workaround I linked. This should also be applicable to .querySelectorAll('video, audio')seems to do the job. |
|
@nolanlawson |
|
The question is answered on both links so I'm closing the issue. |
|
slightly improved version of @nolanlawson's solution:
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();
});
}); |
|
works great 👆 e.g. don't do this: |
anywhere between <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Remark</title>
<link rel="stylesheet" type="text/css" href="./reflex.css" />
<script>
<!-- code goes here -->
</script>
</head>
<body>
<textarea id="source"> |
I'm currently embedding webm videos with code like
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.
The text was updated successfully, but these errors were encountered: