← 全部示例

JavaScript 媒体 substack.com

Substack:点击播放 GIF

暂停循环视频和 GIF,并添加「play」按钮,避免动态图像自动播放。

可复制的代码

// Replace autoplaying GIFs (and looped MP4s used as GIFs) with click-to-play stills
(function () {
  function stopVideo(v) {
    try { v.autoplay = false; v.loop = false; v.removeAttribute('autoplay'); v.pause(); } catch (e) {}
    if (v.dataset.jzGif) { return; }
    v.dataset.jzGif = '1';
    v.controls = false;
    var play = document.createElement('button');
    play.type = 'button';
    play.textContent = '▶ play';
    play.style.cssText = 'position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:18px;padding:6px 12px;cursor:pointer;font:600 13px/1 system-ui,sans-serif;z-index:5;';
    var wrap = v.parentNode;
    if (wrap && getComputedStyle(wrap).position === 'static') { wrap.style.position = 'relative'; }
    if (wrap) { wrap.appendChild(play); }
    play.addEventListener('click', function () {
      try { v.play(); } catch (e) {}
      play.remove();
    });
  }
  function patch() {
    document.querySelectorAll('video[autoplay], video[loop]').forEach(stopVideo);
    document.querySelectorAll('img[src$=".gif" i]').forEach(function (img) {
      if (img.dataset.jzGif) { return; }
      img.dataset.jzGif = '1';
      var orig = img.getAttribute('src') || '';
      img.addEventListener('click', function () { img.setAttribute('src', orig + (orig.indexOf('?') > -1 ? '&' : '?') + 'jz=' + Date.now()); }, { once: true });
      // freeze by reloading once it's in the DOM (browsers usually animate on load only)
      img.style.cursor = 'pointer';
      img.title = 'Click to play GIF';
    });
  }
  patch();
  var obs = new MutationObserver(function () {
    clearTimeout(window.__jzSubGif);
    window.__jzSubGif = setTimeout(patch, 300);
  });
  obs.observe(document.body, { childList: true, subtree: true });
})();

如何使用此示例

  1. 用上方按钮复制代码。
  2. 安装 JustZix(2 分钟),在目标页面打开扩展。
  3. 添加一条匹配该页面的新规则。
  4. 将代码粘贴到规则的 JavaScript 面板并保存 — 每次访问页面时都会运行。

为此示例评分

暂无评分 — 成为第一个。

此示例有效吗?

没有可粘贴的地方,代码片段毫无用处。

JustZix 安装只需 2 分钟,并在每个匹配的页面上运行你的代码。无需账户、无需付费。

免费下载 查看应用场景