Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #43062
    mvaneijgen
    Participant

    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.

    #126534
    Paulie_D
    Member

    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?

    #126536
    pixelgrid
    Participant

    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

    #90053
    mvaneijgen
    Participant

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


    @pixelgrid
    thanks will try this out!

    #126553
    Paulie_D
    Member

    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.

    #126555
    mvaneijgen
    Participant

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

    http://cdpn.io/HgGIp

    #126556
    Paulie_D
    Member

    No link provided.

    #126559
    mvaneijgen
    Participant

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

    #126567
    Paulie_D
    Member

    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.

    #126599
    pixelgrid
    Participant

    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)
  • The forum ‘Other’ is closed to new topics and replies.