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

[Sanpanza]

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?

[Silkrooster]

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...

[Sanpanza]

Thank you Silkrooster​. I will keep looking for an easier way.  I have seen GIFS loop as well, so that is why I am asking. I may be able to live with the quality of a GIF and I can do the cross fading but am not sure how to keep it looping.

[Silkrooster]

Keep in mind cross fading with gif's may not look as good because it doesn't use all 8 shades of gray only a single shade of gray (transparency uses shades of gray to determine the transparency level). So with a gif either it is fully transparent or fully opaque. No in between. You might be able to fake it using a dithering process, but it still doesn't look as good.

[Trevor.Dennis]

Sanpanza

I wonder if you might find more information in the Dreamweaver forum, because I think looping video might be a function of modern web design tools.  We could ask our Nancy O'Shea for an opinion, as she is a proper expert at this stuff.  (The link to her profile will send her an invite to this thread.)

I'll be watching with interest, because the ability to loop video would be a very useful tool, but only if we could host it on something like YouTube, so we could embed such videos in things like these forum threads. That would be truly awesome.

[Sanpanza]

I will cross my fingers. I saw something called cinemagraphs which gave me some ideas about animating still images.

[Nancy OShea]

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

[Eugenio.NYC]

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]

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.

[Nancy OShea]

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

[Trevor.Dennis]

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.

[Sebastian Bleak]

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

[Sanpanza]

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.