gif player gif animator player code

<gif-player>

WebComponent to control Animated GIF playback and access individual frames.

https://github.com/CaptainCodeman/gif-player
http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif
https://github.com/deanm/omggif
 
https://zh.wikipedia.org/zh-tw/BPM
量度音樂速度，音樂單位（BPM，beats per minute）

Start play STOP RESET Pause Rewind, fast backwards Media_control_symbols

GIF  presentation mode full screen

Explode the gif into its component frames Split GIF into Frames Efficiently

Speed
N-times
Backward or reverse animation loop
Animation- Rearrange Frames  Ping-Pong Animation
Accessing gif frame-by-frame

gif player "Ping-pong "   speed model  gif player Accessing gif frame-by-frame

https://support.apple.com/zh-tw/guide/motion/motn71a66f9c/mac
https://vaadin.com/blog/this-web-component-gif-player-lets-you-control-the-playback-of-your-gif

src="url" sets the source URL for the image, just like with the <img> 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.