...

View Full Version : replacing video/animation with still image on playback end



transmoderata
05-27-2012, 02:53 AM
Hi. I don't know if this involves DOM or not so to be safe I'm posting it here. Be aware that I don't really understand javascript (though I have tried) because I just don't have the mind for coding/scripting of any sort. But I am willing to put in an effort, I just need led in the right direction.

The page in question is: http://www.therabbitshome.com/

The animation that plays automatically uses a <video> tag. If there is a more practical way to do this, considering my problem, please suggest it, but I would like for it to be supported by HTML5/CSS3/JS without Flash or another plugin.

My problem is that the video/animation turns black when it ends. Instead, I want it to be replaced by an image of the last frame. I've tried just setting the "poster" attribute of the video and this doesn't do the trick. I also want to make sure that the video can't be paused or replayed. Can anyone help? Thanks.

Also, if you get a VIDEO MALFUCTION message instead of the video, please let me know and tell me what browser/version you're using.

xelawho
05-27-2012, 04:18 AM
this is a little bit shonky, but maybe it will help you find a solution. You can add a listener that once the video ends it sets the current time for a little bit before the end of the track (0.105 seconds seems about right) and then pauses it. Works in Chrome and FF. I only have IE8, which doesn't do html5, so dunno about IE...



<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="thevid" width="1200" height="600" autoplay="autoplay">
<source src="http://www.therabbitshome.com/images/sun_sun~_LOGOANIM.mp4" type="video/mp4" />
<source src="http://www.therabbitshome.com/images/sun_sun~_LOGOANIM.ogg" type="video/ogg" />
VIDEO MALFUNCTION - PLEASE UPGRADE YOUR BROWSER TO SUPPORT HTML5
</video>
<script type = "text/javascript">
document.getElementById('thevid').addEventListener('ended', function(){set_frame(this)});
function set_frame(vid){
vid.currentTime=vid.duration-0.105;
vid.pause();
}
</script>
</body>
</html>

transmoderata
05-27-2012, 05:04 AM
Boy do I feel stupid.

First of all, thank you tons for you help xelawho.

Secondly, turns out this wasn't an issue being caused by code at all. Apparently, the last frame of the actual source video was black, and the html was doing exactly what I wanted it to. I simply removed the last frame and voila. Your script helped me identify that as the problem, xelawho, so thanks for that.

xelawho
05-27-2012, 05:09 AM
yeah, I was kind of wondering why you didn't just edit the video - I guess I assumed you couldn't for some reason. glad you got it sorted, anyway :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum