Grow your CSS skills. Land your dream job.

Ways to show video (or really moving images on a site)

  • # March 1, 2013 at 4:10 am

    I am a bit lost i what will be the best way to display moving images on my site. There so many, so you can say just pick the best one for your needs but i dont think i thought yep of the best way. So i hope you can shout out some solutions you found.

    What i got:

    - Gif: only 500kb no sound
    - html5 video: need to have the video in different formats
    - flash: bleh
    - embed: not much control
    - image sequence: sounds like the best sullotion i can think of but dont really have any reference.

    hope you can help.

    # March 1, 2013 at 4:40 am

    Without knowing how complex this ‘moving images’ thing is supposed to be it’s hard to offer the best solution.

    It doesn’t sound like it’s actually a video….more of an animation.

    Could we see it?

    What is it supposed to do?

    # March 1, 2013 at 5:20 am

    For your image sequence i would use css animations with a javascript fallback

    .photoContainer{
    background:url(‘/path/to/you/image’);
    height:50px;/*size of your image*/
    width:50px;
    animation:play .5s linear steps(20);
    }

    @keyframes play{
    100% { background-position: -1000px; }
    }

    in the above code the animation declaration sets the nr of photos in the sequence to 20(steps(20))
    the photos will be shown every half a second(.5s) .
    You will have to set the container width and height to match those of your photos also the (100% { background-position: -1000px; }) to match the starting x position of your last photo.
    so 20 photos times 50px 1000px.
    hope it helps

    # March 1, 2013 at 8:03 am

    @Paulie_D i am not asking for the best solutions im looking for any solutions.

    @pixelgrid thanks will try this out!

    # March 1, 2013 at 8:07 am

    CSS Animation is one option but until we know what the ‘video’ / ‘moving image’ is supposed to be we cant state that the above will suit.

    Obviously, a CSS animation wouldn’t suit a video at all. It’s more like replacing an animated GIF.

    # March 1, 2013 at 8:35 am

    Here it is with @pixelgrid solution, but i cant seem to get it to work.

    http://cdpn.io/HgGIp

    # March 1, 2013 at 8:39 am

    No link provided.

    # March 1, 2013 at 8:51 am

    i always do that http://cdpn.io/HgGIp

    # March 1, 2013 at 10:07 am

    Unfortunately that Codepen tells us nothing…it has one static image that doesn’t move.

    I still don’t understand what it is you are trying to achieve. Do you have an example (not necessarily your own) of what this thing is supposed to look like?

    ‘Moving Images’ is just not an adequate description.

    # March 1, 2013 at 12:41 pm

    i made a mistake writing the linear before

    this is your code working

    .photoContainer{
    background:url(‘http://dl.dropbox.com/u/345640/bg.jpg’);
    height:1066px;/*size of your image*/
    width:1600px;
    -webkit-animation:play .5s steps(5) infinite;
    -moz-animation:play .5s steps(5) infinite;
    animation:play .5s steps(5) infinite;
    }

    @-webkit-keyframes play {
    100% { background-position: -8000px; }
    }
    @-moz-keyframes play {
    100% { background-position: -8000px; }
    }
    @keyframes play{
    100% { background-position: -8000px; }
    }

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".