V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
amiwrong123
V2EX  ›  问与答

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

  •  
  •   amiwrong123 · 37 天前 · 1307 次点击
    这是一个创建于 37 天前的主题,其中的信息可能已经有所发展或是发生改变。

    通过 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>
    
    7 条回复    2024-10-03 12:15:50 +08:00
    uqf0663
        1
    uqf0663  
       37 天前   ❤️ 1
    给 src 后面拼接一个 ?+随机数 的字符串上去就行。
    whileFalse
        2
    whileFalse  
       37 天前
    转换成视频
    kkocdko
        3
    kkocdko  
       37 天前   ❤️ 1
    首先 GIF 是极其落后的格式,如非必要,请勿使用 GIF 以及其他任何动态图片格式,请使用无声视频来替代,无论在压缩率还是特性支持上都更佳。

    另外 1 楼的随机 query params 做法很糟糕,这会导致浏览器无法使用 http 缓存,每次都要重新下载图片。
    jchnxu
        4
    jchnxu  
       37 天前
    @kkocdko 现在发展这么快了吗?老板能不能多介绍一下视频和 gif 的对比
    Kaiyuan
        5
    Kaiyuan  
       36 天前 via Android   ❤️ 1
    @jchnxu 直接把 gif 转换成视频就能看到差距了,跟本不用介绍…h.264 的 MP4 效果也比 gif 好‘体积不小得多,更别说 webm,avif 等格式了。AV1 编码的 mp4 格式也行。
    jchnxu
        6
    jchnxu  
       36 天前
    @Kaiyuan 很有趣,很有趣,我去试试
    amiwrong123
        7
    amiwrong123  
    OP
       36 天前
    @kkocdko #3
    好的,后面我去尝试一下。

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

    目前的需求 只是记录一个几秒钟的操作即可。唯一一个强需求是,需要能 显示我的按键(比如我按了 ctrl+C 之类的)。层主有推荐的软件也可以推荐下,哈哈。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2559 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:36 · PVG 09:36 · LAX 17:36 · JFK 20:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.