Video background doesn't play again after going to the next slide

[lucabartoli]

1) I have a video background on the first slide. When i go to the next slide and then come back, the video doesn't set currentTime on 0, nor start playing again. An exception is trown in console: "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().".

This is only happens if some seconds had been played. If i skip to the second slide immediately, the video goes to the beginning and starts playing.

2) is there any styling option to get background cover also on video?

[robertop87]

I saw the same issue, in my case is randomic, some times works fine and other don't

[JOduMonT]

as it recommended, did you try to load it like that ? I know it's not background but

  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>

https://github.com/hakimel/reveal.js#lazy-loading

[lucabartoli]

I find out it's a chrome bug, but a workaround is needed because chrome developers didn't solve the issue in the last 8 months and all chrome browsers are affected. It seems that something happens when currentTime is set at line 2765 in reveal.js.

var startVideo = function() { currentVideo.currentTime = 0; currentVideo.play(); currentVideo.removeEventListener( 'loadeddata', startVideo ); };

You can easily see that commenting out currentVideo.currentTime make it work again. Obviously the video is resumed at the position you left it before changing slide.

@jodumont this happens with video's too.

[robertop87]

@hakimel any update about this?

[hakimel]

I tried this in Chrome 60 on a Mac but am not seeing an error. This is the presentation I used:

<div class="slides">
    <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4"></section>
    <section>Empty slide</section>
</div>

I tried waiting for the video to play a few seconds before navigating, and tried skipping back and forth quickly too. Can you reproduce the error using the slides in my example? If not, can you share the presentation source where the exception is thrown?

[robertop87]

@hakimel The bug is reproducible in Android WebView 59 - 60 (chromium), after play once the video is frozen in the last frame or becomes black and cannot play anymore, it happens for both video-tag and background videos. The fix from @lucabartoli only works for video-tag, I don't know how to apply the fix for background-videos. Suggestions?

[hakimel]

Thanks for checking. Didn't realize it was a mobile issue.

[aadlc]

Hello,

I am having a similar problem in Chrome 62.0.3, the difference is that the video stops playing every second time is loaded.

I found what causes the problem in a Chrome Dev blog but my javascript skills are not that advance. Did anyone find a solution? Anyway here is my code:

<div class="reveal">
    <div class="slides">
        <section id="firstSlide" data-autoslide="8000" data-background-video="media/CPL.mp4" data-background-video-muted></section>
        <!-- From here on all sections are loaded dynamically -->
    </div>
</div>

<script>
    Reveal.initialize({
        controls: false,
        progress: true,
        history: true,
        center: true,
        autoSlide: 10000,
        loop: true,
        transition: 'convex'
    });
</script>

Suggestions?

[anfuca]

To make it work, I'm forcing to play the video on 'slidechanged': $(".slide-background.present video")[0].play();

[dirkk0]

Changing line 4077 of Version 3.0.8 to setTimeout(() => {event.target.play();}, 500); seems to work.

[philipfreid]

To make it work, I'm forcing to play the video on 'slidechanged': $(".slide-background.present video")[0].play();

hi @anfuca any chance you could provide a little more detail on how you did this? Did it consistently work for you? Thanks