为知乎的视频播放器添加下载功能
// ==UserScript==
// @name 下载知乎视频
// @version 2.1
// @description 为知乎的视频播放器添加下载功能
// @author 王超
// @license MIT
// @match https://www.zhihu.com/*
// @match https://video.zhihu.com/video/*
// @match https://v.vzuu.com/video/*
// @connect zhihu.com
// @connect video.zhihu.com
// @connect vzuu.com
// @grant GM_info
// @grant GM_download
// @grant unsafeWindow
// @namespace https://greasyfork.org/users/38953
// ==/UserScript==
/* jshint esversion: 8 */
(async () => {
console.log('知乎视频下载')
async function downloadUrl(url, name = (new Date()).valueOf() + '.mp4') {
// Greasemonkey 需要把 url 转为 blobUrl
if (GM_info.scriptHandler === 'Greasemonkey') {
const res = await fetch(url)
const blob = await res.blob()
url = URL.createObjectURL(blob)
}
// Chrome 可以使用 Tampermonkey 的 GM_download 函数绕过 CSP(Content Security Policy) 的限制
if (window.GM_download) {
GM_download({ url, name })
}
else {
// firefox 需要禁用 CSP, about:config -> security.csp.enable => false
let a = document.createElement('a')
a.href = url
a.download = name
a.style.display = 'none'
// a.target = '_blank';
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
setTimeout(() => URL.revokeObjectURL(url), 100)
}
}
async function getVideoInfo(videoId) {
const playlistUrl = `https://lens.zhihu.com/api/v4/videos/${videoId}`
const videoInfo = await (await fetch(playlistUrl, { credentials: 'include' })).json()
let videos = []
// 不同分辨率视频的信息
for (const [key, video] of Object.entries(videoInfo.playlist_v2 || videoInfo.playlist)) {
video.resolution_ename = key
video.resolution_cname = resolutionsName.find(v => v.ename === video.resolution_ename)?.cname
if (!videos.find(v => v.size === video.size)) {
videos.push(video)
}
}
// 按大小排序
videos = videos.sort(function (v1, v2) {
const v1Index = resolutionsName.findIndex(v => v.ename === v1.resolution_ename)
const v2Index = resolutionsName.findIndex(v => v.ename === v2.resolution_ename)
return v1Index === v2Index ? 0 : (v1Index > v2Index ? 1 : -1)
})
return videos
}
// 处理单张卡片(问题/文章)
function processCard(domCard) {
const data = JSON.parse(domCard.dataset.zaExtraModule)
// 视频卡片
if (data.card?.content?.video_id) {
processVideo(domCard)
}
}
// 处理详细内容页面
function processContent(domArticle) {
const data = JSON.parse(domArticle.dataset.zaExtraModule)
if (data.card?.content?.video_id) {
processVideo(domArticle)
}
}
// 处理视频
function processVideo(dom) {
const domData = JSON.parse(dom?.dataset?.zaExtraModule || null)
const itemData = JSON.parse(dom.querySelector('div[data-zop]')?.dataset?.zop || null)
const videoId = domData ? domData.card.content.video_id : window.location.pathname.split('/').pop()
let observer = new MutationObserver(async mutationRecords => {
for (const mutationRecord of mutationRecords) {
if (mutationRecord.addedNodes.length && mutationRecord.addedNodes.item(0).innerText.includes('倍速')) {
observer.disconnect()
observer = null
const curVideoUrl = mutationRecord.target.parentElement.children[0].querySelector('video').getAttribute('src')
const toolbar = mutationRecord.addedNodes.item(0).children.item(0).children.item(1).children.item(1)
// 克隆全屏按钮并修改图标作为下载按钮
const domDownload = toolbar.children.item(toolbar.children.length - 3).cloneNode(true)
domDownload.dataset.videoUrl = curVideoUrl
domDownload.querySelector('svg').setAttribute('viewBox', '0 0 24 24')
domDownload.querySelector('svg').innerHTML = svgDownload
domDownload.classList.add('download')
domDownload.children.item(0).setAttribute('aria-label', '下载')
domDownload.children.item(1).innerText = '下载'
domDownload.addEventListener('click', (event) => {
event.stopPropagation()
downloadUrl(domDownload.dataset.videoUrl)
})
domDownload.addEventListener('pointerenter', () => {
const domMenu = domDownload.children.item(1)
domMenu.style.opacity = 1
domMenu.style.visibility = 'visible'
})
domDownload.addEventListener('pointerleave', () => {
const domMenu = domDownload.children.item(1)
domMenu.style.opacity = 0
domMenu.style.visibility = 'hidden'
})
toolbar.appendChild(domDownload)
// 获取视频信息
const videos = await getVideoInfo(videoId)
// 如果有不同清晰度的视频，添加下载弹出菜单
if (videos.length > 1) {
const curResolute = toolbar.children.item(1).children.item(0).innerText
// 克隆倍速菜单为下载菜单
const menu = toolbar.children.item(0).children.item(1).cloneNode(true)
const menuItemContainer = menu.children.item(0)
const menuItemTemplate = menuItemContainer.children.item(0).cloneNode(true)
let menuItem
//menu.style.left = 'auto'
menuItemContainer.innerHTML = ''
for (const video of videos) {
menuItem = menuItemTemplate.cloneNode(true)
menuItem.dataset.videoUrl = video.play_url
menuItem.innerText = video.resolution_cname
menuItem.addEventListener('click', (event) => {
event.stopPropagation()
downloadUrl(event.srcElement.dataset.videoUrl)
})
menuItemContainer.appendChild(menuItem)
}
domDownload.removeChild(domDownload.children.item(1))
domDownload.appendChild(menu)
}
}
}
})
observer.observe(dom, {
childList: true, // 观察直接子节点
subtree: true // 观察更低的后代节点
})
}
const svgDownload = '<path d="M9.5,4 H14.5 V10 H17.8 L12,15.8 L6.2,10 H9.5 Z M6.2,18 H17.8 V20 H6.2 Z"></path>'
const resolutionsName = [
{ ename: 'FHD', cname: '超清' },
{ ename: 'HD', cname: '高清' },
{ ename: 'SD', cname: '清晰' },
{ ename: 'LD', cname: '普清' }
]
if (['video.zhihu.com', 'v.vzuu.com'].includes(window.location.host)) {
processVideo(document.getElementById('player'))
}
else {
const observer = new MutationObserver(mutationRecords => {
for (const mutationRecord of mutationRecords) {
if (!mutationRecord.oldValue) {
if (mutationRecord.target?.dataset?.zaDetailViewPathModule === 'FeedItem') {
processCard(mutationRecord.target)
}
else if (mutationRecord.target?.dataset?.zaDetailViewPathModule === 'Content' && mutationRecord.target.tagName === 'ARTICLE') {
processContent(mutationRecord.target)
}
}
}
})
observer.observe(document.body, {
attributeFilter: ['data-za-detail-view-path-module'], // 只观察指定特性的变化
attributeOldValue: true, // 是否将特性的旧值传递给回调
attributes: true, // 观察目标节点的属性节点(新增或删除了某个属性，以及某个属性的属性值发生了变化)
childList: false, // 观察直接子节点
subtree: true // 观察更低的后代节点
})
}
})()