amiwrong123
V2EX  ›  问与答

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

  •  
  •   amiwrong123 · Oct 2, 2024 · 1846 views
    This topic created in 594 days ago, the information mentioned may be changed or developed.

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

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

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

    目前的需求 只是记录一个几秒钟的操作即可。唯一一个强需求是,需要能 显示我的按键(比如我按了 ctrl+C 之类的)。层主有推荐的软件也可以推荐下,哈哈。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   4603 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 09:52 · PVG 17:52 · LAX 02:52 · JFK 05:52
    ♥ Do have faith in what you're doing.