• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 132
  • Last Modified:

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

0
Alicia St Rose
Asked:
Alicia St Rose
  • 4
  • 3
1 Solution
 
Julian HansenCommented:
Why do you want it to stop on the last frame?
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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/
0
 
Julian HansenCommented:
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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?
0
 
Julian HansenCommented:
No it is not flexslider

This is the script that is the problem

<script type='text/javascript' src='http://sandbox.intrepidrealist.com/eqogo/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1'></script>

Something in that is reseting the video on end - it is quite a large file (the uncompressed version) and trying to figure out where exactly it is doing it will take some time - which I don't have at the moment.

My feeling is you should try and stop it from doing what it is doing rather than trying to hack around pausing the video - which has a lot that can go wrong.
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
THANK YOU!!

It was a script from a plugin. My video works perfectly now!!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now