**[ This description is mirrored from README.md at [github.com/CaptainCodeman/gif-player](https://github.com//CaptainCodeman/gif-player/blob/v0.0.2/README.md) on 2019-05-10 ]**[](https://www.webcomponents.org/element/captaincodeman/gif-player)# \WebComponent to control Animated GIF playback and access individual frames.[More demos](https://captaincodeman.github.io/gif-player/components/gif-player/demo/)Move your mouse over the images ...```html```This was inspired by [x-gif](http://geelen.github.io/x-gif/) but designed to work with the latest WebComponents v1 spec and fix some issues with playback of certain gifs. It uses the excellent [GifReader from omggif](https://github.com/deanm/omggif) for decoding.## Features:* Pure v1 WebComponent, approximately 4.5Kb gzipped* In-built (simple) loading spinner (because some GIFs are large)* Auto-start playback on load or pause at any frame relative to the start or end* Control playback speed relative to original GIF settings* Control frame displayed by mouseover / touch (based on horizontal position across the image)* Pre-render frames in idle time* (even if animation is not playing)Due to the way animated gifs are encoded and rendered, it's not always possible to jump directly to a specific frame to display it - some of the image may be transparent and rely on pixels from previous frames to render correctly (called 'disposal' in the GIF spec). So if we want to render the _last_ frame in the image, we may need to render all the previous ones first. The pre-rendering option allows this to happen in browser idle-time so that they are ready in advance (but is configurable). Frames are always automatically rendered as they are required during playback or UI interaction but there may be a slight delay depending on the size and complexity of the GIF.## Properties:`src="url"` sets the source URL for the image, just like with the `` element. DataURIs and regular URLs should work but the latter need to provide CORS headers if being used from a different domain. Imgur and Giphy both seem to work fine and are used in the demos.`size="auto"` set to control the sizing. Options are `auto` (the control resizes to the size of the GIF image), `cover` or `contain` (as per `object-fit` or `background-size` CSS properties) or `stretch` to fill the control (may distort the GIF). The control must be explicitly sized for any option other than `auto`.`frame="0"` set the frame to display relative to the start of the animation, use negative numbers to make the frame relative to the end, so `frame="-1"` would display the _last_ frame.`play` set to auto play the GIF on load`speed="2"` set the playback speed relative to the original GIF encoding. A value of 0.5 would playback in slow-motion at half speed whereas 2 would double the speed for faster playback (will always depending on the performance capability of the client device).`repeat` set to repeat playback on completion, otherwise stop`bounce` set to reverse playback direction at the start or end of the animation rather than restarting.`direction="1"` set the direction to play with 1 being forwards and -1 being reverse.`prerender` set to use browser idle time to pre-render frames instead of rendering on demand.Example, fit GIF in a 240 x 160 area, play it continually and reverse direction at either end:```html```## TODOsIt's not fully finished yet but it works pretty well for what I needed. Here are things I'm thinking should be added:* Alternative playback control - play / pause button to start & stop (or hold to play)* Use better rAF loop for rendering & timing of playback based on elapsed time.* Offload decoding work to service workers / offscreen canvas.* Fade-in images after loading and fade between frames to make display smoother.* Use IntersectionObserver to prevent playback while not on screen and also potentially unload some frames to reduce memory use.* Use streaming API to decode gif file as it loads so first frame can be displayed sooner.* Check disposal rules to determine exactly when retaining previous frame is required.* Make omggif a dependency and figure out how to make rollup remove the writer* Use css for cover / contain settings