通过 ScreenToGif 制作了一个 单次播放的 gif ,放到了语雀的文档上。
效果确实是 单次播放的,但是如果我想再次播放的话,就得 F5 刷新一次。

我想实现这种效果,“网页第一次加载时,播放一次(即 gif 是单次播放的)。之后,鼠标点击 gif 图片时,就再执行一次播放”。

想实现这种效果,是不是必须要 用油猴脚本写一个类似这个 https://blog.csdn.net/dragoo1/article/details/92426976 里面的脚本了?
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击播放 GIF 图片</title>
<style>
    #gifContainer {
        width: 300px;
        height: 300px;
        cursor: pointer;
    }
</style>
</head>
<body>

<div id="gifContainer" onclick="playOnce()">
    <img id="gifImage" src="your_gif_image.gif" alt="GIF Image">
</div>

<script>
    function playOnce() {
        var gif = document.getElementById("gifImage");
        var src = gif.src;
        
        // 设置 GIF 图片的 src 属性为空字符串,然后再设置回原来的 src
        // 这将导致 GIF 图片重新加载并播放一次
        gif.src = "";
        gif.src = src;
        
        // 移除点击事件,防止重复点击播放
        document.getElementById("gifContainer").onclick = null;
    }
</script>

</body>
</html>
```
举报· 51 次点击
登录 注册 站外分享
5 条回复  
uqf0663 初学 2024-10-2 23:28:50
给 src 后面拼接一个    ?+随机数   的字符串上去就行。
whileFalse 小成 2024-10-3 03:34:54
转换成视频
kkocdko 小成 2024-10-3 07:22:39
首先 GIF 是极其落后的格式,如非必要,请勿使用 GIF 以及其他任何动态图片格式,请使用无声视频来替代,无论在压缩率还是特性支持上都更佳。

另外 1 楼的随机 query params 做法很糟糕,这会导致浏览器无法使用 http 缓存,每次都要重新下载图片。
jchnxu 初学 2024-10-3 08:53:10
@kkocdko 现在发展这么快了吗?老板能不能多介绍一下视频和 gif 的对比
Kaiyuan 小成 2024-10-3 11:16:37
@jchnxu 直接把 gif 转换成视频就能看到差距了,跟本不用介绍…h.264 的 MP4 效果也比 gif 好‘体积不小得多,更别说 webm,avif 等格式了。AV1 编码的 mp4 格式也行。
返回顶部