如何通过js在浏览器中控制webp动画?
比如播放、暂停等操作?
网友回复
freezeframe可以实现,悬浮就会播放webp动画,离开就暂停。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-size: 16px; } .overlay { background: rgba(3, 18, 27, 0.85); color: var(--light-primary-color); pointer-events: none; left: 50%; max-width: 500px; padding: 3rem; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); width: 95%; z-index: 999; } .overlay h1 { color: var(--white); font-size: 1.4rem; line-height: 1; margin: 0 0 0.5rem; } .overlay p { line-height: 1.4; margin: 0; } </style> </head> <body> <img class="freezeframe" src="//web.debug.only.bfw.wiki/asset/test.webp" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/freezeframe.min.js"></script> <script > new Freezeframe(); </script> </body> </html>