Play embedded video by presssing the right arrow on the keyboard

[kolibril13]

I have a slide with an embedded video, and it is paused by the revealjs default.
I'd like to play it when I press the "next slide" button (right arrow on keyboard).
Here is a code example:

<section>
    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>

I found two workarounds:

1. The data-autoplay tag will play the video the moment the slide appears. But I want the video to be paused in the beginning, so this is not a good solution.

2. The controls tag shows a play button that can be manually clicked with the mouse to start the video. But it does not work with the right arrow on the keyboard.

Any ideas? Thank you in advance!

[christopher-besch]

What about this?

<section data-auto-animate>
    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>
<section data-auto-animate>
    <video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>

[kolibril13]

Thanks @christopher-besch !
The rendered slide looks and behaves exactly how I imagined it :)
The only drawback on the code side is that all code has to be duplicated: not only the video tag that has to be placed twice, but all other content like headings and bullet points as well.

[christopher-besch]

The only drawback on the code side is that all code has to be duplicated: not only the video tag that has to be placed twice, but all other content like headings and bullet points as well.

That is a general issue with data-auto-animate. I don't think there's a way around this without some bigger changes in reveal.js. Only adding such a code-reduction feature for videos would be unclean, I think.

[kolibril13]

Yep, I think this is not the best solution regarding code duplication, but the presentation does what it is supposed to do, so I will use this approach.

On my personal wishlist for revealjs would be a plugin that adds further features to the video api, like a step-trough tag, where one can define timestamps for the video to pause. The video would then resume when the right arrow is pressed.
That would overcome the need to split videos into multiple videos and then using the data-auto-animate syntax.

To anyone with a similar issue: To avoid flickering when changing from one video to the next, one can add the data-id :

<section data-auto-animate>
    <video data-id="video" src="assets/a.mp4"></video>
</section>
<section data-auto-animate>
    <video data-id="video" data-autoplay src="assets/a.mp4"></video>
</section>
<section data-auto-animate>
    <video data-id="video" src="assets/b.mp4"></video>
</section>
<section data-auto-animate>
    <video data-id="video" data-autoplay src="assets/b.mp4"></video>
</section>