☰

YouTube 循环片段

在YouTube视频时间轴上选择片段并循环播放，支持无限循环和刷新页面后设置不丢失

// ==UserScript==
// @name         YouTube Loop Clip
// @name:zh-CN   YouTube 循环片段
// @name:zh-TW   YouTube 循環片段
// @name:en      YouTube Loop Clip
// @name:ja      YouTubeループクリップ
// @name:ko      유튜브 루프 클립
// @namespace    https://github.com/ooking/youtube-loop-clip
// @version      1.0.3
// @description  在YouTube视频时间轴上选择片段并循环播放，支持无限循环和刷新页面后设置不丢失
// @description:zh-CN 在YouTube视频时间轴上选择片段并循环播放，支持无限循环和刷新页面后设置不丢失
// @description:zh-TW 在YouTube影片時間軸上選擇片段並循環播放，支援無限循環且刷新頁面後設定不丟失
// @description:en    Select a clip on the YouTube timeline and loop playback, supports infinite loop and persistent settings after refresh
// @description:ja    YouTubeのタイムラインでクリップを選択してループ再生、無限ループとリフレッシュ後も設定保持
// @description:ko    유튜브 타임라인에서 클립을 선택해 반복 재생, 무한 반복 및 새로고침 후에도 설정 유지
// @author       King Chan ([email protected])
// @include      *://*.youtube.com/**
// @exclude      *://accounts.youtube.com/*
// @exclude      *://www.youtube.com/live_chat_replay*
// @exclude      *://www.youtube.com/persist_identity*
// @grant        GM_setValue
// @grant        GM_getValue
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABm0lEQVR4AdSWAZaCIBRFaTY2tbJsZTUra979iqECYqLWHJ4IfP67cMLhxx38NwF4Onfu1KiurfN4vQMAGd4V4HXVe23dOw+lbksP0A1MCNuwqk92mEVaUgOQOcbIOnd4AGF+BiBDa6jevXiA3Y1laIs+EkAMzn0FwEOoN+kS6uTcaSznnI8h3kvd6TK3AzeZXKRGeoSKpQzGiTcpDihV8ZIDwLCJTyvvBUrR7KKqackB/E3DXz36dqyGI1sOgPGoZM4Ruqp+SiUgycW8BTCiAqQEYjStbdYAIBMQ7AY7Q7tYtQAwTP7QGEypFoA/rosh1gJgaN+J1Arn+nMAvzOTl6w6mSsHkPTn4yK9/csPE+cA+ktDOGHpe/edSJ6OHABe3OHCi2kSSkY2FtTM4+rFvZJcUc0BMIkEXiQEijM/kAJtLKiZk1y54qyUAFjgVo+PAeA8b7XIbN4jd8AWbQA60zRQlrbiIJcd8zMAEguCq5N10t5QmONlFj0ArQ6CQX+hrFmTl/8b1NiZBgD0CAJCu1DqfXUd5CDvZIf/AQAA//8BTt4CAAAABklEQVQDALNfokFDr0z6AAAAAElFTkSuQmCC
// @license      MPL-2.0
// ==/UserScript==

(function () {
  'use strict';

  // 工具函数：格式化时间为 hh:mm:ss
  function formatTime(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = Math.floor(seconds % 60);
    return [h, m, s]
      .map((v) => v < 10 ? '0' + v : v)
      .join(':');
  }

  // 工具函数：解析 hh:mm:ss 为秒
  function parseTime(str) {
    const parts = str.split(':').map(Number);
    if (parts.length === 3) {
      return parts[0] * 3600 + parts[1] * 60 + parts[2];
    } else if (parts.length === 2) {
      return parts[0] * 60 + parts[1];
    } else if (parts.length === 1) {
      return parts[0];
    }
    return 0;
  }

  // 获取当前视频ID
  function getVideoId() {
    const url = new URL(window.location.href);
    return url.searchParams.get('v');
  }

  // 获取播放器元素
  function getPlayer() {
    return document.querySelector('video');
  }

  // 持久化设置
  function saveSettings(settings) {
    const videoId = getVideoId();
    if (videoId) {
      GM_setValue('yt_loop_' + videoId, JSON.stringify(settings));
    }
  }

  function loadSettings() {
    const videoId = getVideoId();
    if (videoId) {
      const data = GM_getValue('yt_loop_' + videoId, null);
      return data ? JSON.parse(data) : null;
    }
    return null;
  }

  // 创建控制按钮
  function createButton(text, onClick) {
    const btn = document.createElement('button');
    btn.textContent = text;
    btn.style.margin = '0 4px';
    btn.style.padding = '4px 8px';
    btn.style.zIndex = '9999';
    btn.style.background = '#ff0';
    btn.style.border = '1px solid #888';
    btn.style.borderRadius = '4px';
    btn.style.cursor = 'pointer';
    btn.onclick = onClick;
    return btn;
  }

  // 创建循环设置按钮（小巧美观）
  function createLoopButton(onClick) {
    const btn = document.createElement('button');
    btn.textContent = 'LoopClip';
    btn.style.margin = '10px 4px';
    btn.style.padding = '2px 10px';
    btn.style.fontSize = '13px';
    btn.style.zIndex = '9999';
    btn.style.background = '#ffe066';
    btn.style.border = '1px solid #bbb';
    btn.style.borderRadius = '20px';
    btn.style.cursor = 'pointer';
    btn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.08)';
    btn.className = 'yt-loop-btn';
    btn.onclick = onClick;
    return btn;
  }

  // 创建设置弹窗（安全版，避免 innerHTML）
  function showDialog(settings, onSave) {
    // 创建遮罩
    const mask = document.createElement('div');
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100vw';
    mask.style.height = '100vh';
    mask.style.background = 'rgba(0,0,0,0.3)';
    mask.style.zIndex = '99999';

    // 弹窗内容
    const dialog = document.createElement('div');
    dialog.style.position = 'fixed';
    dialog.style.top = '50%';
    dialog.style.left = '50%';
    dialog.style.transform = 'translate(-50%, -50%)';
    dialog.style.background = '#fff';
    dialog.style.padding = '24px';
    dialog.style.borderRadius = '8px';
    dialog.style.boxShadow = '0 2px 12px rgba(0,0,0,0.2)';
    dialog.style.minWidth = '320px';

    // 标题
    const title = document.createElement('h3');
    title.style.marginTop = '0';
    title.textContent = '循环片段设置';
    dialog.appendChild(title);

    // 开始时间
    const labelStart = document.createElement('label');
    labelStart.textContent = '开始时间 ';
    const inputStart = document.createElement('input');
    inputStart.id = 'yt-loop-start';
    inputStart.type = 'text';
    inputStart.value = formatTime(settings.start);
    inputStart.style.width = '80px';
    labelStart.appendChild(inputStart);
    dialog.appendChild(labelStart);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 结束时间
    const labelEnd = document.createElement('label');
    labelEnd.textContent = '结束时间 ';
    const inputEnd = document.createElement('input');
    inputEnd.id = 'yt-loop-end';
    inputEnd.type = 'text';
    inputEnd.value = formatTime(settings.end);
    inputEnd.style.width = '80px';
    labelEnd.appendChild(inputEnd);
    dialog.appendChild(labelEnd);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 循环次数和无限循环
    const labelCount = document.createElement('label');
    labelCount.textContent = '循环次数 ';
    const inputCount = document.createElement('input');
    inputCount.id = 'yt-loop-count';
    inputCount.type = 'number';
    inputCount.min = '1';
    inputCount.value = settings.count || '';
    inputCount.style.width = '60px';
    labelCount.appendChild(inputCount);

    const spanInfinite = document.createElement('span');
    const inputInfinite = document.createElement('input');
    inputInfinite.id = 'yt-loop-infinite';
    inputInfinite.type = 'checkbox';
    inputInfinite.checked = !!settings.infinite;
    spanInfinite.appendChild(inputInfinite);
    spanInfinite.appendChild(document.createTextNode(' 无限循环'));
    labelCount.appendChild(spanInfinite);

    dialog.appendChild(labelCount);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 保存按钮
    const btnSave = document.createElement('button');
    btnSave.id = 'yt-loop-save';
    btnSave.textContent = '保存';
    btnSave.style.marginRight = '8px';
    dialog.appendChild(btnSave);

    // 取消按钮
    const btnCancel = document.createElement('button');
    btnCancel.id = 'yt-loop-cancel';
    btnCancel.textContent = '取消';
    dialog.appendChild(btnCancel);

    mask.appendChild(dialog);
    document.body.appendChild(mask);

    // 事件绑定
    btnSave.onclick = () => {
      const start = parseTime(inputStart.value);
      const end = parseTime(inputEnd.value);
      const infinite = inputInfinite.checked;
      const count = infinite ? 0 : parseInt(inputCount.value, 10) || 1;
      onSave({ start, end, count, infinite });
      document.body.removeChild(mask);
    };
    btnCancel.onclick = () => {
      document.body.removeChild(mask);
    };
    inputInfinite.onchange = (e) => {
      inputCount.disabled = e.target.checked;
    };
  }

  // 创建循环设置弹窗（美化，英文，按钮上方弹出，任意空白处可拖动）
  function showLoopDialog(settings, player, onSave) {
    if (document.getElementById('yt-loop-dialog')) return;
    if (player) player.pause();

    // 获取按钮位置
    const btn = document.querySelector('.yt-loop-btn');
    let top = 80, left = window.innerWidth / 2;
    if (btn) {
      const rect = btn.getBoundingClientRect();
      top = rect.top - 16 - 240; // 240为弹窗高度预估，16为间距
      if (top < 10) top = 10;
      left = rect.left + rect.width / 2;
    }

    const dialog = document.createElement('div');
    dialog.id = 'yt-loop-dialog';
    dialog.style.position = 'fixed';
    dialog.style.top = top + 'px';
    dialog.style.left = left + 'px';
    dialog.style.transform = 'translateX(-50%)';
    dialog.style.background = 'linear-gradient(135deg, #fffbe6 0%, #f7f7fa 10%)';
    dialog.style.padding = '8px 28px 20px 28px';
    dialog.style.borderRadius = '16px';
    dialog.style.boxShadow = '0 4px 24px rgba(0,0,0,0.13)';
    dialog.style.minWidth = '340px';
    dialog.style.zIndex = '99999';
    dialog.style.fontFamily = 'Segoe UI, Arial, sans-serif';
    dialog.style.color = '#222';
    dialog.style.cursor = 'move';

    // 标题栏
    const titleBar = document.createElement('div');
    titleBar.style.fontWeight = 'bold';
    titleBar.style.marginBottom = '18px';
    titleBar.style.fontSize = '20px';
    titleBar.style.letterSpacing = '0.5px';
    titleBar.style.textAlign = 'center';
    titleBar.textContent = 'Loop Clip Settings';
    dialog.appendChild(titleBar);

    // label样式
    const labelStyle = 'display:inline-block;min-width:110px;font-size:16px;margin-bottom:8px;';
    const inputStyle = 'font-size:15px;padding:2px 8px;border-radius:6px;border:1px solid #ccc;margin-right:8px;width:90px;background:#fff;';
    const btnStyle = 'font-size:14px;padding:2px 10px;border-radius:8px;border:1px solid #bbb;background:#ffe066;cursor:pointer;margin-left:8px;';

    // 开始时间
    const labelStart = document.createElement('label');
    labelStart.setAttribute('style', labelStyle);
    labelStart.textContent = 'Start Time:';
    const inputStart = document.createElement('input');
    inputStart.id = 'yt-loop-start';
    inputStart.type = 'text';
    inputStart.value = formatTime(settings.start);
    inputStart.setAttribute('style', inputStyle);
    labelStart.appendChild(inputStart);
    const btnGetStart = document.createElement('button');
    btnGetStart.textContent = 'Get Current';
    btnGetStart.setAttribute('style', btnStyle);
    btnGetStart.onclick = () => {
      inputStart.value = formatTime(Math.floor(player.currentTime));
    };
    labelStart.appendChild(btnGetStart);
    dialog.appendChild(labelStart);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 结束时间
    const labelEnd = document.createElement('label');
    labelEnd.setAttribute('style', labelStyle);
    labelEnd.textContent = 'End Time:';
    const inputEnd = document.createElement('input');
    inputEnd.id = 'yt-loop-end';
    inputEnd.type = 'text';
    inputEnd.value = formatTime(settings.end);
    inputEnd.setAttribute('style', inputStyle);
    labelEnd.appendChild(inputEnd);
    const btnGetEnd = document.createElement('button');
    btnGetEnd.textContent = 'Get Current';
    btnGetEnd.setAttribute('style', btnStyle);
    btnGetEnd.onclick = () => {
      inputEnd.value = formatTime(Math.floor(player.currentTime));
    };
    labelEnd.appendChild(btnGetEnd);
    dialog.appendChild(labelEnd);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 循环次数和无限循环
    const labelCount = document.createElement('label');
    labelCount.setAttribute('style', labelStyle);
    labelCount.textContent = 'Loop Count:';
    const inputCount = document.createElement('input');
    inputCount.id = 'yt-loop-count';
    inputCount.type = 'number';
    inputCount.min = '1';
    inputCount.value = settings.count || '';
    inputCount.setAttribute('style', inputStyle);
    labelCount.appendChild(inputCount);

    const spanInfinite = document.createElement('span');
    spanInfinite.setAttribute('style', 'margin-left:12px;font-size:15px;');
    const inputInfinite = document.createElement('input');
    inputInfinite.id = 'yt-loop-infinite';
    inputInfinite.type = 'checkbox';
    inputInfinite.checked = !!settings.infinite;
    spanInfinite.appendChild(inputInfinite);
    spanInfinite.appendChild(document.createTextNode(' Infinite'));
    labelCount.appendChild(spanInfinite);

    dialog.appendChild(labelCount);
    dialog.appendChild(document.createElement('br'));
    dialog.appendChild(document.createElement('br'));

    // 循环播放/暂停按钮
    let isLoopPlaying = false;
    const btnLoopPlay = document.createElement('button');
    btnLoopPlay.textContent = 'Play Loop';
    btnLoopPlay.setAttribute('style', btnStyle + 'margin-right:8px;background:#7ed957;border:1px solid #6bbf4e;');
    const btnLoopPause = document.createElement('button');
    btnLoopPause.textContent = 'Stop';
    btnLoopPause.setAttribute('style', btnStyle + 'margin-right:8px;background:#ffb4b4;border:1px solid #e88c8c;');
    btnLoopPause.disabled = true;
    dialog.appendChild(btnLoopPlay);
    dialog.appendChild(btnLoopPause);

    // 保存按钮
    const btnSave = document.createElement('button');
    btnSave.id = 'yt-loop-save';
    btnSave.textContent = 'Save';
    btnSave.setAttribute('style', btnStyle + 'margin-right:8px;background:#e0e0e0;border:1px solid #bbb;');
    dialog.appendChild(btnSave);

    // 取消按钮
    const btnCancel = document.createElement('button');
    btnCancel.id = 'yt-loop-cancel';
    btnCancel.textContent = 'Close';
    btnCancel.setAttribute('style', btnStyle + 'background:#e0e0e0;border:1px solid #bbb;');
    dialog.appendChild(btnCancel);

    document.body.appendChild(dialog);

    // 拖动逻辑：点击弹窗任意空白处都可拖动
    let isDragging = false, offsetX = 0, offsetY = 0;
    dialog.addEventListener('mousedown', function(e) {
      // 只响应左键且不响应按钮、输入框等控件
      if (e.button !== 0) return;
      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.tagName === 'LABEL') return;
      isDragging = true;
      offsetX = e.clientX - dialog.getBoundingClientRect().left;
      offsetY = e.clientY - dialog.getBoundingClientRect().top;
      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
      document.body.style.userSelect = 'none';
    });
    function moveHandler(e) {
      if (isDragging) {
        dialog.style.left = e.clientX - offsetX + 'px';
        dialog.style.top = e.clientY - offsetY + 'px';
        dialog.style.transform = '';
      }
    }
    function upHandler() {
      isDragging = false;
      document.removeEventListener('mousemove', moveHandler);
      document.removeEventListener('mouseup', upHandler);
      document.body.style.userSelect = '';
    }

    // 事件绑定
    btnSave.onclick = () => {
      const start = parseTime(inputStart.value);
      const end = parseTime(inputEnd.value);
      const infinite = inputInfinite.checked;
      const count = infinite ? 0 : parseInt(inputCount.value, 10) || 1;
      onSave({ start, end, count, infinite });
    };
    btnCancel.onclick = () => {
      document.body.removeChild(dialog);
      stopLoopPlay();
    };
    inputInfinite.onchange = (e) => {
      inputCount.disabled = e.target.checked;
    };

    // 循环播放逻辑
    let loopCount = 0;
    let loopHandler = null;
    function startLoopPlay() {
      if (isLoopPlaying) return;
      isLoopPlaying = true;
      btnLoopPlay.disabled = true;
      btnLoopPause.disabled = false;
      loopCount = 0;
      player.currentTime = parseTime(inputStart.value);
      player.play();
      loopHandler = function() {
        const start = parseTime(inputStart.value);
        const end = parseTime(inputEnd.value);
        const infinite = inputInfinite.checked;
        const count = infinite ? 0 : parseInt(inputCount.value, 10) || 1;
        if (start < end && player.currentTime >= end) {
          if (infinite || loopCount < count - 1) {
            player.currentTime = start;
            player.play();
            loopCount++;
          } else {
            loopCount = 0;
            player.pause();
            stopLoopPlay();
          }
        }
        if (player.currentTime < start || player.currentTime > end) {
          loopCount = 0;
        }
      };
      player.addEventListener('timeupdate', loopHandler);
    }
    function stopLoopPlay() {
      if (!isLoopPlaying) return;
      isLoopPlaying = false;
      btnLoopPlay.disabled = false;
      btnLoopPause.disabled = true;
      if (loopHandler) player.removeEventListener('timeupdate', loopHandler);
      loopHandler = null;
      player.pause();
    }
    btnLoopPlay.onclick = startLoopPlay;
    btnLoopPause.onclick = stopLoopPlay;
  }

  // 主逻辑
  function main() {
    // 等待播放器加载
    let lastUrl = '';
    setInterval(() => {
      if (window.location.href !== lastUrl) {
        lastUrl = window.location.href;
        setTimeout(init, 1000);
      }
    }, 1000);

    function init() {
      // 移除旧按钮
      document.querySelectorAll('.yt-loop-btn').forEach((el) => el.remove());

      const player = getPlayer();
      if (!player) return;

      // 按钮容器
      const controls = document.querySelector('.ytp-left-controls');
      if (!controls) return;

      // 加载设置
      let settings = loadSettings() || { start: 0, end: Math.floor(player.duration), count: 1, infinite: false };

      // 创建循环设置按钮
      const btnLoop = createLoopButton(() => {
        showLoopDialog(settings, player, (newSettings) => {
          settings = { ...settings, ...newSettings };
          saveSettings(settings);
        });
      });
      controls.appendChild(btnLoop);

      // 原生播放器按钮正常播放
      // 循环逻辑已移到弹窗按钮
    }
    // 首次初始化
    setTimeout(init, 1000);
  }

  // 启动脚本
  main();
})();