hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.49k stars 16.61k forks source link

background-per-stack feature request/feedback request #2139

Open securelyfitz opened 6 years ago

securelyfitz commented 6 years ago

I did a presentation recently where i wanted video backgrounds that would play continuously through several slides. I first tried to make it work with fragments, but found it lots easier to mess with how backgrounds are updated.

I implemented it with an additional flag and a few changes here:

https://github.com/securelyfitz/reveal.js/commit/7f8b5891be63f4398e9fa333ec01066db51ac0e1

I'm new to .js, and new to reveal.js. Is this a rational way of doing it? recommendations for a better approach?

denehyg commented 6 years ago

I've been considering something like this for a little while. I would rather see the outer section of the stack used for the common background. For example...

<section data-background-video="...">
    <section>
        <h1>Vertical slide 1</h1>
    </section>

    <section>
        <h1>Vertical slide 2</h1>
    </section>

    <section data-background-image="...">
        <h1>Vertical slide 3</h1>
    </section>
</section>

This would remove the need for the configuration flag, keeping the background scheme easy to understand, and I expect would keep the background handling in the code cleaner. It also provides flexibility to override the common background with a background in any of the individual slides, eg for vertical slide 3 in the example above.

securelyfitz commented 6 years ago

duh, that makes a lot more sense. I'm no expert on the data structure but it looks like backgroundv.childElementCount>0 is a good test to see if there's an empty vertical background.

Flag removed in https://github.com/securelyfitz/reveal.js/commit/4161c92fa5c09e97deff8c92d8c789ce5b9f36fd

Works for me but still paranoid i'm breaking all sorts of other stuff though...

denehyg commented 6 years ago

When I tried this code it still resets the stack's video background if there's a vertical slide that also has a video background. For the example below, the first two slides will show a.mp4 in the background without restarting the video (as you want). Changing to slide 3 will start b.mp4 as the background. Changing to slide 4 will again show a.mp4 as desired, but it will be played from the beginning of the video.

<section data-background-video="a.mp4">
    <section>
        <h1>Vertical slide 1</h1>
    </section>

    <section>
        <h1>Vertical slide 2</h1>
    </section>

    <section data-background-video="b.mp4">
        <h1>Vertical slide 3</h1>
    </section>

    <section>
        <h1>Vertical slide 3</h1>
    </section>
</section>

I think it would be better to keep track of the stack background separately from the individual slides to handle this. Have a look at https://github.com/denehyg/reveal.js/commit/ef097a3696605d65bdbea8af676bda94355ccaf1 and see if that works for you. It leaves the existing background handling alone so there should no concern about breaking other stuff.