Link to home
Start Free TrialLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

Need html5 video player to end on last frame.

Hi!
I'm using the native html5 video player in WordPress. I need the video to stop on the last frame.
I found some code to do it, but it's not working. I think I may need to swap out some more dollar signs in the function, but I'm not sure.

Page is here:

http://sandbox.intrepidrealist.com/eqogo/alicias-test-page/

Here's my script:

<script>
			(function(jQuery) {
			jQuery(document).ready(function() {
				var $videos = $('.play_once video');
		
				$videos.each(function() {
					var $video = $(this)[0];
		
					$video.removeAttr('loop');
		
					$video.addEventListener('loadedmetadata', function() {
						var pause_at = $video.duration - 0.5,
							interval;
		
						$video.addEventListener('playing', function() {
							interval = setInterval(function() {
								if ($video.currentTime >= pause_at) {
									$video.pause();
								}
							}, 450);
						}, false);
					});
				});
			});
		})(jQuery);
		</script>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Why do you want it to stop on the last frame?
Avatar of Alicia St Rose

ASKER

It's acting as a short animation to the right and then I'm going to fade in some images to the left with CSS animations when the video is done.

You can see it here. It plays automatically and then disappears. :(

http://sandbox.intrepidrealist.com/eqogo/alicias-test-page/
Normally a video stops and shows its last frame. I copied your <video> element into a sample page (you can see it here http://www.marcorpsa.com/ee/t3098.html) as you can see when it is done it shows the last frame.

Something on your page is clearing that.

If I copy you page and remove the media element library then the last frame is displayed - so something in that library is clearing the video.

What is the library doing for you?
Okay, here is my greeness showing. I don't even know what the media  element library is. I'm using Flexslider and intend to add this video as a slide then fade in two images to the right using CSS animations. I've got this going with static images, (see here) not yet with video. So, I'm not sure it will work. Could the Flexslider be the problem?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
THANK YOU!!

It was a script from a plugin. My video works perfectly now!!
You are welcome.