【油猴脚本】实现视频下载，目前测试支持视频是MP4格式，其他格式没测试。前端JavaScript实现视频下载，可以自定义视频名字。解决idm视频下载时的名字不匹配

前言：哈喽，大家好，今天给大家分享视频下载脚本！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

油猴脚本，实现视频下载，目前测试支持视频是MP4格式，其他格式没测试。前端JavaScript实现视频下载，可以自定义视频名字。解决idm视频下载时的名字不匹配。

---

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

📚一、视频下载分同源和非同源

1️⃣同源就是：视频地址和网站地址在同一个域名下
2️⃣非同源是：视频地址和网站地址不在同一个域名下

📚二、同源核心代码

/*url视频地址，name保存的文件名例如：学习资料.mp4 必须带格式*/
  const downLoadVideo= (url, name ) => {
  const alink = document.createElement('a')
  alink.href = url
  alink.download = name
  alink.click()
  alink.remove()
}

📚三、非同源核心代码

先用fetch(url)请求数据，再用a标签下载

/*url视频地址，name保存的文件名例如：学习资料.mp4 必须带格式*/
const downLoadVideo2= ( url, name ) => {
    	fetch(url)  
        .then((response) => response.blob())
        .then((result) => {
            const objectUrl = window.URL.createObjectURL(result)
            const alink = document.createElement('a')
            alink.href = objectUrl
            alink.download = name
            alink.click()
            alink.remove()
            window.URL.revokeObjectURL(objectUrl)
        })
}

📚四、非同源案列，可以直接复制使用

🎥效果

✍️javascript

// ==UserScript==
// @name        视频下载测试-详情页自动视频下载

// @namespace   https://xx.com/preview.html?*
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://xx.com/*
// @icon         https://xx.com/favicon.ico
// @grant        GM_download
// @require      http://code.jquery.com/jquery-2.1.1.min.js
// @run-at       document-end
// ==/UserScript==

(function () {
  'use strict';


  const downLoadVideo2 = (vdo_url, vdo_name) => {
    console.log(document.querySelector('.downLoadButton').innerText)
    document.querySelector('.downLoadButton').innerText = '下载中...'
    fetch(vdo_url)
      .then((response) => response.blob())
      .then((result) => {
        const objectUrl = window.URL.createObjectURL(result)
        const alink = document.createElement('a')
        alink.href = objectUrl
        alink.download = vdo_name ? vdo_name : 'zhangSan.mp4'  //这个name是保存的文件名 例如保存成 zhangSan.mp4
        alink.click()
        alink.remove()
        window.URL.revokeObjectURL(objectUrl)
        document.querySelector('.downLoadButton').innerText = '一键下载'
        console.log(`下载完成!`)
      })


  }

  // 创建新按钮
  function start() {
    var button1 = document.createElement('button');
    button1.textContent = "一键下载"; //按钮内容
    button1.style.width = "90px"; //按钮宽度
    button1.style.height = "28px"; //按钮高度
    button1.style.lineHeight = "28px"; //按钮高度
    button1.style.align = "center"; //文本居中
    button1.style.color = "white"; //按钮文字颜色
    button1.style.background = "#31c27c"; //按钮底色
    button1.style.border = "1px solid #e33e33"; //边框属性
    button1.style.borderRadius = "10px"; //按钮四个角弧度
    button1.style.position = "fixed"; //固定在窗口上
    button1.style.top = "100px"; //距离上面的位置
    button1.style.right = "100px"; //距离右面的位置
    button1.className += " downLoadButton";//按钮的class
    document.body.appendChild(button1);// 添加新按钮到页面中

    var v_url = document.querySelector('video').src;  //视频地址
    var v_name = document.querySelector('.videoinfo-title').innerText; //视频保存的名称 含格式 列如xx.mp4 一般在页面获取
    button1.addEventListener('click', function () {
      // 在这里编写点击按钮后执行的代码
      downLoadVideo2(v_url, v_name)
    });
  }


  setTimeout(start, 3000);
  // Your code here...
})();

✍️修改参数

修改成对应的网站参数 例如 https:xx.com/* 否则在所有网站都会运行

// @match        http*://*/*

修改视频保存的名字,把.videoinfo-title换成视频的标题class或id

var v_name = document.querySelector('.videoinfo-title').innerText; //视频保存的名称 含格式 列如xx.mp4 一般在页面获取

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕

---

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作