Go to frame after HTML5 video playback end

Question

I have a simple HTML page on which I've set up a fullscreen background video (no loop) using the Vide plugin .

Now it works wonders, however I want the video to "freeze" on its last frame to display a logo I've included at the end of the video. It naturally does in all browsers except for Safari. If, after the video ends, I happen to go to another tab and come back, safari switches to displaying a random frame in the video as "poster", for no apparent reason.

To avoid this, I thought I could add a script to make the video go to somewhere in the last frames after it has ended, and I've found the following tip:

v.addEventListener("ended", function(){
this.currentTime = 0;
});

I've tried incorporating into my page but it's not working and I was hoping someone might be able to point me in the right direction?

Vide says the following:

// Get instance of the plugin
var instance = $('#yourElement').data('vide');

// Get video element of the background. Do what you want.
instance.getVideoObject();

And I've come up with this:

HTML

<div id="video" data-vide-bg="video/video" data-vide-options="loop: false, muted: true, position: 50% 50%">
</div>

SCRIPT

<script type="text/javascript">
    var video = $('#video').data('vide');

    video.getVideoObject().addEventListener("ended", function() { 
       this.currentTime = 1; 
    });
</script>

Thank you in advance for all your help!

Answer 1

On the ended event get the .duration of the video
Next set .currentTime to .duration
Then .pause()

In order to get the real video tag from the Vide plugin replace:

 var vid1 = document.getElementById('vid1')

with:

 var vid1 = document.querySelector('video');

in the demo. Doing so should be able to directly control the video unless the plugin uses an <iframe> or doesn't use a <video> tag at all. To verify do the following when you play the video:

Chrome, Firefox, IE, and Edge F12 or Safari ⌘ command + ⌥ option + c
Select the "Element" (or equivalent ie first tab) tab
ctrl + F or ⌘ command + F
Search for the <video> tag by finding the plugin id hook. (ie the id of the element that uses the plugin.)
There should be a <video> tag, an <iframe> , or maybe <object> within that element that the plugin hooks into.
If it's a <video> you're in business, the other 2 tags are highly unlikely (especially an <iframe> since this is a background video.)

Demo

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls></video> <script> var vid1 = document.getElementById('vid1'); vid1.addEventListener('ended', captureFrame); function captureFrame(e) { var lastFrame = this.duration; this.currentTime = lastFrame; this.pause(); } </script> </body> </html>

Go to frame after HTML5 video playback end

Question

1 answers

solution1
3 2017-07-17 17:01:00

Demo

Go to frame after HTML5 video playback end

Question

1 answers

solution1 3 2017-07-17 17:01:00

Demo

solution1
3 2017-07-17 17:01:00