Skip to main content
Sanpanza
Sanpanza
Known Participant
July 12, 2018
Question

Can I made a continuously looping video with three images. Like a cinemagraph.

  • July 12, 2018
  • 5 replies
  • 4503 views

How can I do a video cross fade of three images so that they loop continuously. I want to put them on my website and have them continuously loop. The woman is the same in all three frames so the 3 backgrounds would continually fade in and out.

Is that possible or do I need web programing for that?

I figured out how to crossfade them but when I render the file just stops and the end of the timeline. Can I make it loop back on itself like a cinemagraph?

    This topic has been closed for replies.

    5 replies

    Sanpanza
    SanpanzaAuthor
    Known Participant
    July 24, 2018

    Thank you all for your feedback. Here is a link to the loop.  Corporate Headshot Photographer in Los Angeles | Ed Carreon

    Thanks Eugenio.NYC​ for your loop. That was extremely helpful.

    I found a coder to run the look in html5/jQuery code and it works swell. The web page is running 3 jpegs, each under 100 kb in size. Tiny.

    I want to do some similar images on other pages but I am wondering now which method of looping would be most efficient and require the least band width. Rendering the three images as cross fading MP4 video file OR keeping the HTML 5/jquery method I am now using?

    It would seem that the tiny size of my jpegs give me a bit more flexibility in size with minimum band width. I just don't know.

    Any thoughts would be appreciated.

      Sebastian Bleak
      Community Expert
      Sebastian BleakCommunity Expert
      Community Expert
      July 13, 2018

      Hi

      Here is a video that might help:

      Adobe Photoshop "Animated GIF Basics" Wk295 - YouTube

      Go to 3:38 to learn how to loop.

      Instead of a GIF, you could choose a different export type.

      Hope you found this helpful

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        July 13, 2018

        HTML 5 video supports loop, however IMO, video is not what you want. 

        <video>: The Video Embed element - HTML: HyperText Markup Language | MDN

        I would use a jQuery based slideshow and 3 static images.  The transition fx can be almost anything you want.  Blur, fade, blinds, Ken Burns effect, etc....   See link below to a Wow Slider demo.

        Carousel jQuery

        Nancy O'Shea— Product User & Community Expert
          Trevor.Dennis
          Community Expert
          Trevor.DennisCommunity Expert
          Community Expert
          July 13, 2018

          Nancy, is there anyway of placing a looping video in a forum thread, or on Facebook as a for instance?

          After making my last post to this thread, I had a wee look round and tried some of what I found in the Testing forum, but failed miserably. 

          Testing Looping YouTube Videos

          The closest I could see was actually putting a line in front of the video inviting the viewer to right click and choose Loop.  I'll call that Assisted Automation.    It would be nice if we could upload to our own YouTube channel and set the video to loop, but I guess that would be a big ask of YouTube, even if they do have uber-powerful servers, with near infinite storage space and bandwidth.  I actually don't mind the 256 colour restriction of GIF, but I would so like to be able to add sound, so unless anyone knows different, we are back to video.

          Eugenio.NYC
          Eugenio.NYC
          Participating Frequently
          July 13, 2018

          If you create the animated Gif like this one with more steps and then

          convert the Gif in a video an loop the video in html

          Will work for you?

          Regards

          E

          Sanpanza
          SanpanzaAuthor
          Known Participant
          July 13, 2018

          Eugenio.NYC​  You are the BOMB !!!!!!!!!!!!!!!!!!!!!!!!!!!!  This is what I am looking for.

          If I understand correctly from you and Nancy OShea, I would

          first create the transitions in photoshop then export as GIF.

          Second I would use create the loop? 

          Is that correct?

          Photoshop.

          THANK YOU.

            Silkrooster
            Silkrooster
            Legend
            July 12, 2018

            It is dependent of the video codec and the player. For example gif files can loop if enabled when saving as web and the html states it can loop. However gif files only have 256 shades of color so color quality is severally compromised.

            I think swf can loop and possibly quicktime movie, but the former requires a way to convert to swf, like using animate CC and the later must be enabled in the codec. Assuming it still can.

            So really it is a bunch of hunting as I don't believe there are any sources that state what each animation/video formats support and how to change the settings. But I could be wrong on that as it has been years since I did any looking. Frankly I may have found something and totally forgot about it.
            I wish I could be more help, sorry...

            Nancy OShea
            Community Expert
            Nancy OSheaCommunity Expert
            Community Expert
            July 13, 2018

            Silkrooster  wrote

            I think swf can loop and possibly quicktime movie...

            SWF/Flash is dead.  Quick Time is dead.  By default, modern browsers are ending support for all 3rd party player plugins.  Adobe is ending Flash Player in 2020.

            Plugin Roadmap for Firefox - Plugins | MDN

            Nancy O'Shea— Product User & Community Expert
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices