☰

【自用】-本地 YouTube 下载器【mod】

不需要透过第三方的服务就能下载 YouTube 视频。【mod自https://gf.qytechs.cn/zh-CN/scripts/369400-local-youtube-downloader】

目前为 2021-08-18 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @icon        https://www.youtube.com/favicon.ico
  3. // @homepage    https://gf.qytechs.cn/zh-CN/scripts/431000-%E8%87%AA%E7%94%A8-%E6%9C%AC%E5%9C%B0-youtube-%E4%B8%8B%E8%BD%BD%E5%99%A8-mod 
  4.     // @name        【自用】-本地 YouTube 下载器【mod】
  5.     // @namespace    https://blog.maple3142.net/
  6.     // @version      0.9.45【自用mod】
  7.     // @description  不需要透过第三方的服务就能下载 YouTube 视频。【mod自https://gf.qytechs.cn/zh-CN/scripts/369400-local-youtube-downloader】
  8.     // @author       maple3142
  9.     // @match        https://*.youtube.com/*
  10.     // @require      https://unpkg.com/vue@2.6.10/dist/vue.js
  11.     // @require      https://unpkg.com/xfetch-js@0.3.4/xfetch.min.js
  12.     // @require      https://unpkg.com/@ffmpeg/ffmpeg@0.6.1/dist/ffmpeg.min.js
  13.     // @require      https://bundle.run/p-queue@6.3.0
  14.     // @grant        GM_xmlhttpRequest
  15.     // @grant        unsafeWindow
  16.     // @run-at       document-start
  17.     // @connect      googlevideo.com
  18.     // @compatible   firefox >=52
  19.     // @compatible   chrome >=55
  20.     // @license      MIT
  21.     // ==/UserScript==
  22.      
  23.     ;(function () {
  24.     	'use strict'
  25.     	const DEBUG = true
  26.     	const createLogger = (console, tag) =>
  27.     		Object.keys(console)
  28.     			.map(k => [k, (...args) => (DEBUG ? console[k](tag + ': ' + args[0], ...args.slice(1)) : void 0)])
  29.     			.reduce((acc, [k, fn]) => ((acc[k] = fn), acc), {})
  30.     	const logger = createLogger(console, 'YTDL')
  31.     	const sleep = ms => new Promise(res => setTimeout(res, ms))
  32.      
  33.     	const LANG_FALLBACK = 'en'
  34.     	const LOCALE = {
  35.     		en: {
  36.     			togglelinks: 'Show/Hide Links',
  37.     			stream: 'Stream',
  38.     			adaptive: 'Adaptive',
  39.     			videoid: 'Video ID: ',
  40.     			inbrowser_adaptive_merger: 'Online Adaptive Video & Audio Merger (FFmpeg)',
  41.     			dlmp4: 'Download high-resolution mp4 in one click',
  42.     			get_video_failed: 'Failed to get video infomation for unknown reason, refresh the page may work.',
  43.     			live_stream_disabled_message: 'Local YouTube Downloader is not available for live stream'
  44.     		},
  45.     		'zh-tw': {
  46.     			togglelinks: '顯示 / 隱藏連結',
  47.     			stream: '串流 Stream',
  48.     			adaptive: '自適應 Adaptive',
  49.     			videoid: '影片 ID: ',
  50.     			inbrowser_adaptive_merger: '線上自適應影片及音訊合成工具 (FFmpeg)',
  51.     			dlmp4: '一鍵下載高畫質 mp4',
  52.     			get_video_failed: '無法取得影片資訊，重新整理頁面可能會有效果。',
  53.     			live_stream_disabled_message: '因為是直播的緣故，本地 YouTube 下載器的功能是停用的。'
  54.     		},
  55.     		'zh-hk': {
  56.     			togglelinks: '顯示／隱藏連結',
  57.     			stream: '串流 Stream',
  58.     			adaptive: '自動適應 Adaptive',
  59.     			videoid: '影片 ID: ',
  60.     			inbrowser_adaptive_merger: '網上自動適應影片及音訊合成工具 (FFmpeg)',
  61.     			dlmp4: '一 click 下載高畫質 mp4',
  62.     			get_video_failed: '無法取得影片資訊，重新整理頁面可能會有效果。',
  63.     			live_stream_disabled_message: '本地 YouTube 下載器無法用於直播。'
  64.     		},
  65.     		zh: {
  66.     			togglelinks: '显示／隐藏链接',
  67.     			stream: '串流 Stream',
  68.     			adaptive: '自适应 Adaptive',
  69.     			videoid: '视频 ID: ',
  70.     			inbrowser_adaptive_merger: '线上自适应视频及音频合成工具 (FFmpeg)',
  71.     			dlmp4: '一键下载高画质 mp4',
  72.     			get_video_failed: '无法取得影片资讯，重新整理页面可能会有效果。',
  73.     			live_stream_disabled_message: '因为是直播，本地 YouTube 下载器的功能已被禁用。'
  74.     		},
  75.     		ja: {
  76.     			togglelinks: 'リンク表示・非表示',
  77.     			stream: 'ストリーミング',
  78.     			adaptive: 'アダプティブ',
  79.     			videoid: 'ビデオ ID: ',
  80.     			inbrowser_adaptive_merger: 'ビデオとオーディオを合併するオンラインツール (FFmpeg)',
  81.     			dlmp4: 'ワンクリックで高解像度の mp4 をダウンロード',
  82.     			live_stream_disabled_message: 'ライブ配信のため、ローカル YouTube ダウンローダーは無効になっています。'
  83.     		},
  84.     		kr: {
  85.     			togglelinks: '링크 보이기 · 숨기기',
  86.     			stream: '스트리밍',
  87.     			adaptive: '적응 (어댑티브)',
  88.     			videoid: '비디오 ID: ',
  89.     			inbrowser_adaptive_merger: '비디오와 오디오를 합병하는 온라인 도구 (FFmpeg)',
  90.     			dlmp4: '한 번의 클릭으로 고해상도 mp4 다운로드'
  91.     		},
  92.     		es: {
  93.     			togglelinks: 'Mostrar/Ocultar Links',
  94.     			stream: 'Stream',
  95.     			adaptive: 'Adaptable',
  96.     			videoid: 'Id del Video: ',
  97.     			inbrowser_adaptive_merger: 'Acoplar Audio a Video (FFmpeg)'
  98.     		},
  99.     		he: {
  100.     			togglelinks: 'הצג/הסתר קישורים',
  101.     			stream: 'סטרים',
  102.     			adaptive: 'אדפטיבי',
  103.     			videoid: 'מזהה סרטון: '
  104.     		},
  105.     		fr: {
  106.     			togglelinks: 'Afficher/Masquer les liens',
  107.     			stream: 'Stream',
  108.     			adaptive: 'Adaptative',
  109.     			videoid: 'ID vidéo: ',
  110.     			inbrowser_adaptive_merger: 'Fusionner vidéos et audios adaptatifs dans le navigateur (FFmpeg)',
  111.     			dlmp4: 'Téléchargez la plus haute résolution mp4 en un clic'
  112.     		},
  113.     		pl: {
  114.     			togglelinks: 'Pokaż/Ukryj Linki',
  115.     			stream: 'Stream',
  116.     			adaptive: 'Adaptywne',
  117.     			videoid: 'ID filmu: ',
  118.     			inbrowser_adaptive_merger: 'Połącz audio i wideo adaptywne w przeglądarce (FFmpeg)',
  119.     			dlmp4: 'Pobierz .mp4 w najwyższej jakości'
  120.     		},
  121.     		hi: {
  122.     			togglelinks: 'लिंक टॉगल करें',
  123.     			stream: 'स्ट्रीमिंग (Stream)',
  124.     			adaptive: 'अनुकूली (Adaptive)',
  125.     			videoid: 'वीडियो आईडी: {{id}}'
  126.     		},
  127.     		ru: {
  128.     			togglelinks: 'Показать/Cкрыть ссылки',
  129.     			stream: 'Поток',
  130.     			adaptive: 'Адаптивный',
  131.     			videoid: 'Идентификатор видео: ',
  132.     			inbrowser_adaptive_merger: 'Адаптивное слияние видео и аудио онлайн (FFmpeg)',
  133.     			dlmp4: 'Скачать mp4 в высоком разрешении в один клик',
  134.     			get_video_failed:
  135.     				'Не удалось получить информацию о видео по неизвестной причине, попробуйте обновить страницу.',
  136.     			live_stream_disabled_message: 'Локальный загрузчик YouTube недоступен для прямой трансляции'
  137.     		},
  138.     		ua: {
  139.     			togglelinks: 'Показати/Приховати посилання',
  140.     			stream: 'Потік',
  141.     			adaptive: 'Адаптивний',
  142.     			videoid: 'Ідентифікатор відео: ',
  143.     			inbrowser_adaptive_merger: 'Адаптивне злиття відео і аудіо онлайн (FFmpeg)',
  144.     			dlmp4: 'Завантажити mp4 у високій роздільній здатності в один клік',
  145.     			get_video_failed:
  146.     				'Не вдалося отримати інформацію про відео з невідомої причини, спробуйте оновити сторінку.',
  147.     			live_stream_disabled_message: 'Локальний завантажувач YouTube недоступний для прямої трансляції'
  148.     		},
  149.     		cs: {
  150.     			togglelinks: 'Zobrazit/Skrýt odkazy',
  151.     			stream: 'Stream',
  152.     			adaptive: 'Adaptivní',
  153.     			videoid: 'ID videa: ',
  154.     			inbrowser_adaptive_merger: 'Online nástroj pro sloučení videa a audia (FFmpeg)',
  155.     			dlmp4: 'Stáhnout video mp4 jedním kliknutím ve vysokém rozlišení',
  156.     			get_video_failed: 'Nepodařilo se nahrát informace o videu. Zkuste obnovit stránku (F5).',
  157.     			live_stream_disabled_message: 'Local YouTube Downloader není dostupný pro živé vysílání'
  158.     		}
  159.     	}
  160.     	for (const [lang, data] of Object.entries(LOCALE)) {
  161.     		if (lang === LANG_FALLBACK) continue
  162.     		for (const key of Object.keys(LOCALE[LANG_FALLBACK])) {
  163.     			if (!(key in data)) {
  164.     				data[key] = LOCALE[LANG_FALLBACK][key]
  165.     			}
  166.     		}
  167.     	}
  168.     	const findLang = l => {
  169.     		l = l.replace('-Hant', '') // special case for zh-Hant-TW
  170.     		// language resolution logic: zh-tw --(if not exists)--> zh --(if not exists)--> LANG_FALLBACK(en)
  171.     		l = l.toLowerCase().replace('_', '-')
  172.     		if (l in LOCALE) return l
  173.     		else if (l.length > 2) return findLang(l.split('-')[0])
  174.     		else return LANG_FALLBACK
  175.     	}
  176.     	const getLangCode = () => {
  177.     		const html = document.querySelector('html')
  178.     		if (html) {
  179.     			return html.lang
  180.     		} else {
  181.     			return navigator.language
  182.     		}
  183.     	}
  184.     	const $ = (s, x = document) => x.querySelector(s)
  185.     	const $el = (tag, opts) => {
  186.     		const el = document.createElement(tag)
  187.     		Object.assign(el, opts)
  188.     		return el
  189.     	}
  190.     	const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  191.     	const parseDecsig = data => {
  192.     		try {
  193.     			if (data.startsWith('var script')) {
  194.     				// they inject the script via script tag
  195.     				const obj = {}
  196.     				const document = {
  197.     					createElement: () => obj,
  198.     					head: { appendChild: () => {} }
  199.     				}
  200.     				eval(data)
  201.     				data = obj.innerHTML
  202.     			}
  203.     			const fnnameresult = /=([a-zA-Z0-9\$]+?)\(decodeURIComponent/.exec(data)
  204.     			const fnname = fnnameresult[1]
  205.     			const _argnamefnbodyresult = new RegExp(escapeRegExp(fnname) + '=function\\((.+?)\\){((.+)=\\2.+?)}').exec(
  206.     				data
  207.     			)
  208.     			const [_, argname, fnbody] = _argnamefnbodyresult
  209.     			const helpernameresult = /;(.+?)\..+?\(/.exec(fnbody)
  210.     			const helpername = helpernameresult[1]
  211.     			const helperresult = new RegExp('var ' + escapeRegExp(helpername) + '={[\\s\\S]+?};').exec(data)
  212.     			const helper = helperresult[0]
  213.     			logger.log(`parsedecsig result: %s=>{%s\n%s}`, argname, helper, fnbody)
  214.     			return new Function([argname], helper + '\n' + fnbody)
  215.     		} catch (e) {
  216.     			logger.error('parsedecsig error: %o', e)
  217.     			logger.info('script content: %s', data)
  218.     			logger.info(
  219.     				'If you encounter this error, please copy the full "script content" to https://pastebin.com/ for me.'
  220.     			)
  221.     		}
  222.     	}
  223.     	const parseQuery = s => [...new URLSearchParams(s).entries()].reduce((acc, [k, v]) => ((acc[k] = v), acc), {})
  224.     	const parseResponse = (id, playerResponse, decsig) => {
  225.     		logger.log(`video %s playerResponse: %o`, id, playerResponse)
  226.     		let stream = []
  227.     		if (playerResponse.streamingData.formats) {
  228.     			stream = playerResponse.streamingData.formats.map(x =>
  229.     				Object.assign({}, x, parseQuery(x.cipher || x.signatureCipher))
  230.     			)
  231.     			logger.log(`video %s stream: %o`, id, stream)
  232.     			for (const obj of stream) {
  233.     				if (obj.s) {
  234.     					obj.s = decsig(obj.s)
  235.     					obj.url += `&${obj.sp}=${encodeURIComponent(obj.s)}`
  236.     				}
  237.     			}
  238.     		}
  239.      
  240.     		let adaptive = []
  241.     		if (playerResponse.streamingData.adaptiveFormats) {
  242.     			adaptive = playerResponse.streamingData.adaptiveFormats.map(x =>
  243.     				Object.assign({}, x, parseQuery(x.cipher || x.signatureCipher))
  244.     			)
  245.     			logger.log(`video %s adaptive: %o`, id, adaptive)
  246.     			for (const obj of adaptive) {
  247.     				if (obj.s) {
  248.     					obj.s = decsig(obj.s)
  249.     					obj.url += `&${obj.sp}=${encodeURIComponent(obj.s)}`
  250.     				}
  251.     			}
  252.     		}
  253.     		logger.log(`video %s result: %o`, id, { stream, adaptive })
  254.     		return { stream, adaptive, details: playerResponse.videoDetails, playerResponse }
  255.     	}
  256.      
  257.     	const determineChunksNum = size => {
  258.     		const n = Math.ceil(size / (1024 * 1024 * 3)) // 3 MB
  259.     		return n
  260.     	}
  261.     	// video downloader
  262.     	const xhrDownloadUint8Array = async ({ url, contentLength }, progressCb) => {
  263.     		if (typeof contentLength === 'string') contentLength = parseInt(contentLength)
  264.     		progressCb({
  265.     			loaded: 0,
  266.     			total: contentLength,
  267.     			speed: 0
  268.     		})
  269.     		const chunkSize = Math.floor(contentLength / determineChunksNum(contentLength))
  270.     		const getBuffer = (start, end) =>
  271.     			new Promise((res, rej) => {
  272.     				const xhr = {}
  273.     				xhr.responseType = 'arraybuffer'
  274.     				xhr.method = 'GET'
  275.     				xhr.url = url
  276.     				xhr.headers = {
  277.     					'User-Agent':
  278.     						'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.124 Safari/537.36',
  279.     					Range: `bytes=${start}-${end ? end - 1 : ''}`,
  280.     					'Accept-Encoding': 'identity',
  281.     					'Accept-Language': 'en-us,en;q=0.5',
  282.     					'Accept-Charset': 'ISO-8859-1,utf-8;q=0.7,*;q=0.7'
  283.     				}
  284.     				xhr.onload = obj => {
  285.     					if (obj.status >= 200 && obj.status < 300) {
  286.     						res(obj.response)
  287.     					} else {
  288.     						rej(obj)
  289.     					}
  290.     				}
  291.     				GM_xmlhttpRequest(xhr)
  292.     			})
  293.     		const data = new Uint8Array(contentLength)
  294.     		let downloaded = 0
  295.     		const queue = new pQueue.default({ concurrency: 5 })
  296.     		const startTime = Date.now()
  297.     		const ps = []
  298.     		for (let start = 0; start < contentLength; start += chunkSize) {
  299.     			const exceeded = start + chunkSize > contentLength
  300.     			const curChunkSize = exceeded ? contentLength - start : chunkSize
  301.     			const end = exceeded ? null : start + chunkSize
  302.     			const p = queue.add(() =>
  303.     				getBuffer(start, end)
  304.     					.then(buf => {
  305.     						downloaded += curChunkSize
  306.     						data.set(new Uint8Array(buf), start)
  307.     						const ds = (Date.now() - startTime + 1) / 1000
  308.     						progressCb({
  309.     							loaded: downloaded,
  310.     							total: contentLength,
  311.     							speed: downloaded / ds
  312.     						})
  313.     					})
  314.     					.catch(err => {
  315.     						queue.clear()
  316.     						alert('Download error')
  317.     					})
  318.     			)
  319.     			ps.push(p)
  320.     		}
  321.     		await Promise.all(ps)
  322.     		return data
  323.     	}
  324.      
  325.     	const ffWorker = FFmpeg.createWorker({
  326.     		logger: DEBUG ? m => logger.log(m.message) : () => {}
  327.     	})
  328.     	let ffWorkerLoaded = false
  329.     	const mergeVideo = async (video, audio) => {
  330.     		if (!ffWorkerLoaded) await ffWorker.load()
  331.     		await ffWorker.write('video.mp4', video)
  332.     		await ffWorker.write('audio.mp4', audio)
  333.     		await ffWorker.run('-i video.mp4 -i audio.mp4 -c copy output.mp4', {
  334.     			input: ['video.mp4', 'audio.mp4'],
  335.     			output: 'output.mp4'
  336.     		})
  337.     		const { data } = await ffWorker.read('output.mp4')
  338.     		await ffWorker.remove('output.mp4')
  339.     		return data
  340.     	}
  341.     	const triggerDownload = (url, filename) => {
  342.     		const a = document.createElement('a')
  343.     		a.href = url
  344.     		a.download = filename
  345.     		document.body.appendChild(a)
  346.     		a.click()
  347.     		a.remove()
  348.     	}
  349.     	const dlModalTemplate = `
  350.     <div style="width: 100%; height: 100%;">
  351.     	<div v-if="merging" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px;">Merging video, please wait...</div>
  352.     	<div v-else style="height: 100%; width: 100%; display: flex; flex-direction: column;">
  353.      		<div style="flex: 1; margin: 10px;">
  354.     			<p style="font-size: 24px;">Video</p>
  355.     			<progress style="width: 100%;" :value="video.progress" min="0" max="100"></progress>
  356.     			<div style="display: flex; justify-content: space-between;">
  357.     				<span>{{video.speed}} kB/s</span>
  358.     				<span>{{video.loaded}}/{{video.total}} MB</span>
  359.     			</div>
  360.     		</div>
  361.     		<div style="flex: 1; margin: 10px;">
  362.     			<p style="font-size: 24px;">Audio</p>
  363.     			<progress style="width: 100%;" :value="audio.progress" min="0" max="100"></progress>
  364.     			<div style="display: flex; justify-content: space-between;">
  365.     				<span>{{audio.speed}} kB/s</span>
  366.     				<span>{{audio.loaded}}/{{audio.total}} MB</span>
  367.     			</div>
  368.     		</div>
  369.     	</div>
  370.     </div>
  371.     `
  372.     	function openDownloadModel(adaptive, title) {
  373.     		const win = open(
  374.     			'',
  375.     			'Video Download',
  376.     			`toolbar=no,height=${screen.height / 2},width=${screen.width / 2},left=${screenLeft},top=${screenTop}`
  377.     		)
  378.     		const div = win.document.createElement('div')
  379.     		win.document.body.appendChild(div)
  380.     		win.document.title = `Downloading "${title}"`
  381.     		const dlModalApp = new Vue({
  382.     			template: dlModalTemplate,
  383.     			data() {
  384.     				return {
  385.     					video: {
  386.     						progress: 0,
  387.     						total: 0,
  388.     						loaded: 0,
  389.     						speed: 0
  390.     					},
  391.     					audio: {
  392.     						progress: 0,
  393.     						total: 0,
  394.     						loaded: 0,
  395.     						speed: 0
  396.     					},
  397.     					merging: false
  398.     				}
  399.     			},
  400.     			methods: {
  401.     				async start(adaptive, title) {
  402.     					win.onbeforeunload = () => true
  403.     					// YouTube's default order is descending by video quality
  404.     					const videoObj = adaptive
  405.     						.filter(x => x.mimeType.includes('video/mp4') || x.mimeType.includes('video/webm'))
  406.     						.map(v => {
  407.     							const [_, quality, fps] = /(\d+)p(\d*)/.exec(v.qualityLabel)
  408.     							v.qualityNum = parseInt(quality)
  409.     							v.fps = fps ? parseInt(fps) : 30
  410.     							return v
  411.     						})
  412.     						.sort((a, b) => {
  413.     							if (a.qualityNum === b.qualityNum) return b.fps - a.fps // ex: 30-60=-30, then a will be put before b
  414.     							return b.qualityNum - a.qualityNum
  415.     						})[0]
  416.     					const audioObj = adaptive.find(x => x.mimeType.includes('audio/mp4'))
  417.     					const vPromise = xhrDownloadUint8Array(videoObj, e => {
  418.     						this.video.progress = (e.loaded / e.total) * 100
  419.     						this.video.loaded = (e.loaded / 1024 / 1024).toFixed(2)
  420.     						this.video.total = (e.total / 1024 / 1024).toFixed(2)
  421.     						this.video.speed = (e.speed / 1024).toFixed(2)
  422.     					})
  423.     					const aPromise = xhrDownloadUint8Array(audioObj, e => {
  424.     						this.audio.progress = (e.loaded / e.total) * 100
  425.     						this.audio.loaded = (e.loaded / 1024 / 1024).toFixed(2)
  426.     						this.audio.total = (e.total / 1024 / 1024).toFixed(2)
  427.     						this.audio.speed = (e.speed / 1024).toFixed(2)
  428.     					})
  429.     					const [varr, aarr] = await Promise.all([vPromise, aPromise])
  430.     					this.merging = true
  431.     					win.onunload = () => {
  432.     						// trigger download when user close it
  433.     						const bvurl = URL.createObjectURL(new Blob([varr]))
  434.     						const baurl = URL.createObjectURL(new Blob([aarr]))
  435.     						triggerDownload(bvurl, title + '-videoonly.mp4')
  436.     						triggerDownload(baurl, title + '-audioonly.mp4')
  437.     					}
  438.     					const result = await Promise.race([mergeVideo(varr, aarr), sleep(1000 * 25).then(() => null)])
  439.     					if (!result) {
  440.     						alert('An error has occurred when merging video')
  441.     						const bvurl = URL.createObjectURL(new Blob([varr]))
  442.     						const baurl = URL.createObjectURL(new Blob([aarr]))
  443.     						triggerDownload(bvurl, title + '-videoonly.mp4')
  444.     						triggerDownload(baurl, title + '-audioonly.mp4')
  445.     						return this.close()
  446.     					}
  447.     					this.merging = false
  448.     					const url = URL.createObjectURL(new Blob([result]))
  449.     					triggerDownload(url, title + '.mp4')
  450.     					win.onbeforeunload = null
  451.     					win.onunload = null
  452.     					win.close()
  453.     				}
  454.     			}
  455.     		}).$mount(div)
  456.     		dlModalApp.start(adaptive, title)
  457.     	}
  458.      
  459.     	const template = `
  460.     <div class="box" :class="{'dark':dark}">
  461.       <template v-if="!isLiveStream">
  462.         <div v-if="adaptive.length" class="of-h t-center c-pointer lh-20">
  463.           <a class="fs-14px" @click="dlmp4" v-text="strings.dlmp4"></a>
  464.         </div>
  465.         <div @click="hide=!hide" class="box-toggle div-a t-center fs-14px c-pointer lh-20" v-text="strings.togglelinks"></div>
  466.         <div :class="{'hide':hide}">
  467.           <div class="t-center fs-14px" v-text="strings.videoid+id"></div>
  468.           <div class="d-flex">
  469.             <div class="f-1 of-h">
  470.               <div class="t-center fs-14px" v-text="strings.stream"></div>
  471.               <a class="ytdl-link-btn fs-14px" target="_blank" v-for="vid in stream" :href="vid.url" :title="vid.type" v-text="formatStreamText(vid)"></a>
  472.             </div>
  473.             <div class="f-1 of-h">
  474.               <div class="t-center fs-14px" v-text="strings.adaptive"></div>
  475.               <a class="ytdl-link-btn fs-14px" target="_blank" v-for="vid in adaptive" :href="vid.url" :title="vid.type" v-text="formatAdaptiveText(vid)"></a>
  476.             </div>
  477.           </div>
  478.           <div class="of-h t-center">
  479.             <a class="fs-14px" href="https://maple3142.github.io/mergemp4/" target="_blank" v-text="strings.inbrowser_adaptive_merger"></a>
  480.           </div>
  481.         </div>
  482.       </template>
  483.       <template v-else>
  484.         <div class="t-center fs-14px lh-20" v-text="strings.live_stream_disabled_message"></div>
  485.       </template>
  486.     </div>
  487.     `.slice(1)
  488.     	const app = new Vue({
  489.     		data() {
  490.     			return {
  491.     				hide: true,
  492.     				id: '',
  493.     				isLiveStream: false,
  494.     				stream: [],
  495.     				adaptive: [],
  496.     				details: null,
  497.     				dark: false,
  498.     				lang: findLang(getLangCode())
  499.     			}
  500.     		},
  501.     		computed: {
  502.     			strings() {
  503.     				return LOCALE[this.lang.toLowerCase()]
  504.     			}
  505.     		},
  506.     		methods: {
  507.     			dlmp4() {
  508.     				openDownloadModel(this.adaptive, this.details.title)
  509.     			},
  510.     			formatStreamText(vid) {
  511.     				return [vid.qualityLabel, vid.quality].filter(x => x).join(': ')
  512.     			},
  513.     			formatAdaptiveText(vid) {
  514.     				let str = [vid.qualityLabel, vid.mimeType].filter(x => x).join(': ')
  515.     				if (vid.mimeType.includes('audio')) {
  516.     					str += ` ${Math.round(vid.bitrate / 1000)}kbps`
  517.     				}
  518.     				return str
  519.     			}
  520.     		},
  521.     		template
  522.     	})
  523.     	logger.log(`default language: %s`, app.lang)
  524.      
  525.     	// attach element
  526.     	const shadowHost = $el('div')
  527.     	const shadow = shadowHost.attachShadow ? shadowHost.attachShadow({ mode: 'closed' }) : shadowHost // no shadow dom
  528.     	logger.log('shadowHost: %o', shadowHost)
  529.     	const container = $el('div')
  530.     	shadow.appendChild(container)
  531.     	app.$mount(container)
  532.      
  533.     	if (DEBUG && typeof unsafeWindow !== 'undefined') {
  534.     		// expose some functions for debugging
  535.     		unsafeWindow.$app = app
  536.     		unsafeWindow.parseQuery = parseQuery
  537.     		unsafeWindow.parseDecsig = parseDecsig
  538.     		unsafeWindow.parseResponse = parseResponse
  539.     	}
  540.     	const load = async playerResponse => {
  541.     		try {
  542.     			const basejs =
  543.     				(typeof ytplayer !== 'undefined' && 'config' in ytplayer && ytplayer.config.assets
  544.     					? 'https://' + location.host + ytplayer.config.assets.js
  545.     					: 'web_player_context_config' in ytplayer
  546.     					? 'https://' + location.host + ytplayer.web_player_context_config.jsUrl
  547.     					: null) || $('script[src$="base.js"]').src
  548.     			const decsig = await xf.get(basejs).text(parseDecsig)
  549.     			const id = parseQuery(location.search).v
  550.     			const data = parseResponse(id, playerResponse, decsig)
  551.     			logger.log('video loaded: %s', id)
  552.     			app.isLiveStream = data.playerResponse.playabilityStatus.liveStreamability != null
  553.     			app.id = id
  554.     			app.stream = data.stream
  555.     			app.adaptive = data.adaptive
  556.     			app.details = data.details
  557.      
  558.     			const actLang = getLangCode()
  559.     			if (actLang != null) {
  560.     				const lang = findLang(actLang)
  561.     				logger.log('youtube ui lang: %s', actLang)
  562.     				logger.log('ytdl lang:', lang)
  563.     				app.lang = lang
  564.     			}
  565.     		} catch (err) {
  566.     			alert(app.strings.get_video_failed)
  567.     			logger.error('load', err)
  568.     		}
  569.     	}
  570.      
  571.     	// hook fetch response
  572.     	const ff = fetch
  573.     	unsafeWindow.fetch = (...args) => {
  574.     		if (args[0] instanceof Request) {
  575.     			return ff(...args).then(resp => {
  576.     				if (resp.url.includes('player')) {
  577.     					resp.clone().json().then(load)
  578.     				}
  579.     				return resp
  580.     			})
  581.     		}
  582.     		return ff(...args)
  583.     	}
  584.      
  585.     	// attach element
  586.     	setInterval(() => {
  587.     		const el =
  588.     			$('#info-contents') ||
  589.     			$('#watch-header') ||
  590.     			$('.page-container:not([hidden]) ytm-item-section-renderer>lazy-list')
  591.     		if (el && !el.contains(shadowHost)) {
  592.     			el.appendChild(shadowHost)
  593.     		}
  594.     	}, 100)
  595.      
  596.     	// init
  597.     	unsafeWindow.addEventListener('load', () => {
  598.     		const firstResp = unsafeWindow?.ytplayer?.config?.args?.raw_player_response
  599.     		if (firstResp) {
  600.     			load(firstResp)
  601.     		}
  602.     	})
  603.      
  604.     	// listen to dark mode toggle
  605.     	const $html = $('html')
  606.     	new MutationObserver(() => {
  607.     		app.dark = $html.getAttribute('dark') === 'true'
  608.     	}).observe($html, { attributes: true })
  609.     	app.dark = $html.getAttribute('dark') === 'true'
  610.      
  611.     	const css = `
  612.     .hide{
  613.     	display: none;
  614.     }
  615.     .t-center{
  616.     	text-align: center;
  617.     }
  618.     .d-flex{
  619.     	display: flex;
  620.     }
  621.     .f-1{
  622.     	flex: 1;
  623.     }
  624.     .fs-14px{
  625.     	font-size: 14px;
  626.     }
  627.     .of-h{
  628.     	overflow: hidden;
  629.     }
  630.     .box{
  631.       padding-top: .5em;
  632.       padding-bottom: .5em;
  633.     	border-bottom: 1px solid var(--yt-border-color);
  634.     	font-family: Arial;
  635.     }
  636.     .box-toggle{
  637.     	margin: 3px;
  638.     	user-select: none;
  639.     	-moz-user-select: -moz-none;
  640.     }
  641.     .ytdl-link-btn{
  642.     	display: block;
  643.     	border: 1px solid !important;
  644.     	border-radius: 3px;
  645.     	text-decoration: none !important;
  646.     	outline: 0;
  647.     	text-align: center;
  648.     	padding: 2px;
  649.     	margin: 5px;
  650.     	color: black;
  651.     }
  652.     a, .div-a{
  653.     	text-decoration: none;
  654.     	color: var(--yt-button-color, inherit);
  655.     }
  656.     a:hover, .div-a:hover{
  657.     	color: var(--yt-spec-call-to-action, blue);
  658.     }
  659.     .box.dark{
  660.     	color: var(--yt-endpoint-color, var(--yt-spec-text-primary));
  661.     }
  662.     .box.dark .ytdl-link-btn{
  663.     	color: var(--yt-endpoint-color, var(--yt-spec-text-primary));
  664.     }
  665.     .box.dark .ytdl-link-btn:hover{
  666.     	color: rgba(200, 200, 255, 0.8);
  667.     }
  668.     .box.dark .box-toggle:hover{
  669.     	color: rgba(200, 200, 255, 0.8);
  670.     }
  671.     .c-pointer{
  672.     	cursor: pointer;
  673.     }
  674.     .lh-20{
  675.     	line-height: 20px;
  676.     }
  677.      
  678.     /* https://gf.qytechs.cn/zh-TW/scripts/369400-local-youtube-downloader/discussions/95744 */
  679.     #meta-contents,
  680.     #info-contents{
  681.     	display: contents !important;
  682.     }
  683.      
  684.     ytd-watch-metadata.style-scope {
  685.     	display: none !important;
  686.     }
  687.     `
  688.     	shadow.appendChild($el('style', { textContent: css }))
  689.     })()
  690.  
  691.  
  692.  
  693. function addNewStyle(newStyle) {//增加新样式表
  694.     var styleElement = document.getElementById('styles_js');
  695.     if (!styleElement) {
  696.         styleElement = document.createElement('style');
  697.         styleElement.type = 'text/css';
  698.         styleElement.id = 'styles_js';
  699.         document.getElementsByTagName('head')[0].appendChild(styleElement);
  700.     }
  701.     styleElement.appendChild(document.createTextNode(newStyle));
  702. }
  703.  
  704.   addNewStyle('\
  705. #meta-contents,\
  706. #info-contents{\
  707.     display: contents !important;\
  708. }\
  709. ytd-watch-metadata.style-scope {\
  710.     display: none !important;\
  711. }\
  712. ');

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址