🎉 欢迎访问GreasyFork.Org 镜像站!本镜像站由公众号【爱吃馍】搭建,用于分享脚本。联系邮箱📮

Greasy fork 爱吃馍镜像

Greasy Fork is available in English.

📂 缓存分发状态(共享加速已生效)
🕒 页面同步时间:2025/12/31 23:05:52
🔄 下次更新时间:2026/01/01 00:05:52
手动刷新缓存

Youtube Live Clock

show duration for livestreams and present time for archives

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

// ==UserScript==
// @name              Youtube Live Clock
// @name:zh-TW        Youtube Live Clock
// @namespace         https://greasyfork.org/scripts/453367
// @version           1.8.1
// @description       show duration for livestreams and present time for archives
// @description:zh-TW 顯示直播及直播存檔當下的時間
// @author            Derek
// @match             *://www.youtube.com/*
// @run-at            document-start
// @grant             GM_addStyle
// ==/UserScript==

(() => {
  //you can choose your ideal date format by changing the FORMAT's value below
  const FORMAT = 1
  /*
    1: 2022/10/31 06:37:10 (default)
    2: 10/31/2022 06:37:10
    3: 31/10/2022 06:37:10
    4: Mon 31/10/2022 06:37:10
    5: Monday 31/10/2022 06:37:10
    6: Monday 31 October 2022 06:37:10
  */

  GM_addStyle(`
    .ytp-chrome-bottom .ytp-time-display,
    .ytp-chrome-bottom .ytp-right-controls {
      display: flex !important;
    }
    #present-time {
      margin: 0 10px 0 5px !important;
    }
  `)

  const $ = (element) => document.querySelector(element)

  const abbr = {
    week: { Sun: 'Sunday', Mon: 'Monday', Tue: 'Tuesday', Wed: 'Wednesday', Thu: 'Thursday', Fri: 'Friday', Sat: 'Saturday' },
    monthFull: { Jan: 'January', Feb: 'February', Mar: 'March', Apr: 'April', May: 'May', Jun: 'June', Jul: 'July', Aug: 'August', Sep: 'September', Oct: 'October', Nov: 'November', Dec: 'December' },
    month: { Jan: '01', Feb: '02', Mar: '03', Apr: '04', May: '05', Jun: '06', Jul: '07', Aug: '08', Sep: '09', Oct: '10', Nov: '11', Dec: '12' }
  }

  const twoDigit = (num) => num.toString().padStart(2, '0')

  const timeFormat = (time) => {
    const second = time % 60
    const minute = Math.floor((time / 60) % 60)
    const hour = Math.floor(time / 3600)
    return hour > 0 ? `${hour}:${twoDigit(minute)}:${twoDigit(second)}` : `${minute}:${twoDigit(second)}`
  }

  const dateFormat = (presentTime) => {
    const [week, month, day, year, time] = presentTime.toString().split(' ')
    return {
      1: ` (${year}/${abbr.month[month]}/${day} ${time})`,
      2: ` (${abbr.month[month]}/${day}/${year} ${time})`,
      3: ` (${day}/${abbr.month[month]}/${year} ${time})`,
      4: ` (${week} ${day}/${abbr.month[month]}/${year} ${time})`,
      5: ` (${abbr.week[week]} ${day}/${abbr.month[month]}/${year} ${time})`,
      6: ` (${abbr.week[week]} ${day} ${abbr.monthFull[month]} ${year} ${time})`
    }[FORMAT]
  }

  let videoId, timeDisplay, progressBar, liveData, publication, observer
  let videoData = null

  const waitElements = () => {
    return new Promise((resolve) => {
      const observer = new MutationObserver(() => {
        timeDisplay = $('.ytp-chrome-bottom .ytp-time-display')
        progressBar = $('.ytp-chrome-bottom .ytp-progress-bar')

        if (timeDisplay && progressBar) {
          if (videoData !== $('#microformat script')) {
            videoData = $('#microformat script')
            observer.disconnect()
            resolve()
          }
        }
      })
      observer.observe(document.body, { attributes: false, childList: true, subtree: true })
    })
  }

  const getLiveClock = () => {
    let clockElement = $('#present-time')
    if (!clockElement) {
      clockElement = document.createElement('span')
      clockElement.id = 'present-time'
      timeDisplay.insertBefore(clockElement, timeDisplay.childNodes[1])
    }
    return clockElement
  }

  const updateLiveTime = () => {
    const progressTime = progressBar.getAttribute('aria-valuenow')
    return publication.endDate ? dateFormat(new Date(Date.parse(publication.startDate) + progressTime * 1000)) : timeFormat(progressTime)
  }

  const main = async (vid) => {
    if (videoId === vid) return
    videoId = vid

    if (observer) observer.disconnect()
    await waitElements()

    liveData = JSON.parse(videoData.textContent)
    if (!liveData.publication) {
      if ($('#present-time')) $('#present-time').remove()
      return
    }
    publication = liveData.publication[0]

    let liveClock = getLiveClock()
    liveClock.textContent = updateLiveTime()

    observer = new MutationObserver(() => { liveClock.textContent = updateLiveTime() })
    observer.observe(progressBar, { characterData: true, attributeFilter: ['aria-valuenow'] })
  }

  document.addEventListener('yt-navigate-finish', (event) => {
    const url = event.detail.endpoint.commandMetadata.webCommandMetadata.url
    if (url.startsWith('/watch?v=') || url.startsWith('/live/')) main(url.match(/[A-z0-9_-]{11}/)[0])
  })
})()