播放次数为 1 次的 gif，在网页上如何实现鼠标点击一次，就再次播放？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 89 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

想实现这种效果，是不是必须要用油猴脚本写一个类似这个 https://blog.csdn.net/dragoo1/article/details/92426976 里面的脚本了？

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

gif

点击

播放

7 条回复 • 2024-10-03 12:15:50 +08:00

uqf0663

89 天前

给 src 后面拼接一个 ?+随机数的字符串上去就行。

whileFalse

89 天前

转换成视频

kkocdko

89 天前

首先 GIF 是极其落后的格式，如非必要，请勿使用 GIF 以及其他任何动态图片格式，请使用无声视频来替代，无论在压缩率还是特性支持上都更佳。

另外 1 楼的随机 query params 做法很糟糕，这会导致浏览器无法使用 http 缓存，每次都要重新下载图片。

jchnxu

89 天前

@kkocdko 现在发展这么快了吗？老板能不能多介绍一下视频和 gif 的对比

Kaiyuan

89 天前 via Android

@jchnxu 直接把 gif 转换成视频就能看到差距了，跟本不用介绍…h.264 的 MP4 效果也比 gif 好‘体积不小得多，更别说 webm,avif 等格式了。AV1 编码的 mp4 格式也行。

jchnxu

89 天前

@Kaiyuan 很有趣，很有趣，我去试试

amiwrong123

89 天前

@kkocdko #3
好的，后面我去尝试一下。

我做 gif 的目的，只是用语雀写个人技术博客时，某篇文章需要有动图来表现操作步骤（这样效果比较好）。用视频的话，也能达到我的目的。

目前的需求只是记录一个几秒钟的操作即可。唯一一个强需求是，需要能显示我的按键（比如我按了 ctrl+C 之类的）。层主有推荐的软件也可以推荐下，哈哈。

播放次数为 1 次的 gif，在网页上如何实现 鼠标点击一次，就再次播放？

播放次数为 1 次的 gif，在网页上如何实现鼠标点击一次，就再次播放？