Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    replacing video/animation with still image on playback end

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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...

    Code:
    <!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>
    Last edited by xelawho; 05-27-2012 at 05:35 AM.

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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
    Last edited by xelawho; 05-27-2012 at 06:12 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •