油猴脚本收藏本站
开启辅助访问

TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina）

TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina）»首页 › 浏览器用户脚本开发技术 › 脚本开发 › 油猴脚本“微博视频下载” 开发及发布教程
返回列表 发新帖
打印 上一主题 下一主题

油猴脚本“微博视频下载” 开发及发布教程

[复制链接]
跳转到指定楼层
楼主
发表于 2019-12-13 09:04:59 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式

马上注册，结交更多网友，浏览器插件/脚本不再愁！

您需要 登录 才可以下载或查看，没有帐号？注册会员

x


在没有下载工具的情况下，以上的图片就是我们常用的下载方式。既然发现了包含mp4字样的链接地址，不妨继续到网页标签元素中在探索一番，说不定还会有其它的收获。



真让人惊喜，video元素中竟然有视频直链。既然这样，我们只需要获取到video的src属性，再往页面上添加个下载按钮就能撇弃资源嗅探的繁琐下载方式了！！！
思路已经想好了，那么就开始动手写代码吧。

第一步，先把最基本的框架搭好。

  1. // ==UserScript==
  2. // @icon            http://weibo.com/favicon.ico
  3. // @name            微博视频下载助手
  4. // @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/url]
  5. // @author          猎隼丶止戈
  6. // @description     下载微博视频
  7. // @match           *://weibo.com/tv/v/*
  8. // @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
  9. // @version         0.0.1
  10. // @grant           GM_addStyle
  11. // ==/UserScript==
  12. (function () {
  13.     'use strict';

  15. })();
复制代码


第二步，编写下载弹出框与获取文件名的工具对象

  1. var videoTool = {
  2.     //获取文件名
  3.     getFileName: function (url, rule_start, rule_end) {
  4.             var start = url.lastIndexOf(rule_start) + 1;
  5.             var end = url.lastIndexOf(rule_end);
  6.             return url.substring(start, end);
  7.         },
  8.         //弹出下载框
  9.         download: function (videoUrl, name) {
  10.             var content = "file content!";
  11.             var data = new Blob([content], {
  12.                 type: "text/plain;charset=UTF-8"
  13.             });
  14.             var downloadUrl = window.URL.createObjectURL(data);
  15.             var anchor = document.createElement("a");
  16.             anchor.href = videoUrl;
  17.             anchor.download = name;
  18.             anchor.click();
  19.             window.URL.revokeObjectURL(data);
  20.         }
  21. };
复制代码


第三步，生成一个下载按钮，并嵌入页面

  1. //与元数据块中的@grant值相对应，功能是生成一个style样式
  2. GM_addStyle('#down_video_btn{color:#fa7d3c;}');

  4. //视频下载按钮的html代码
  5. var down_btn_html = '<li>';
  6. down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
  7. down_btn_html += '<span class="pos">';
  8. down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
  9. down_btn_html += '<span>';
  10. down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
  11. down_btn_html += '<em>视频下载</em>';
  12. down_btn_html += '</span>';
  13. down_btn_html += '</span>';
  14. down_btn_html += '</span>';
  15. down_btn_html += ' <span class="arrow"><span class="W_arrow_bor W_arrow_bor_t"><i class="S_line1"></i><em class="S_bg1_br"></em></span></span>';
  16. down_btn_html += ' </li>';

  18. //将以上拼接的html代码插入到网页里的ul标签中
  19. var ul_tag = $("div.WB_handle>ul");
  20. if (ul_tag) {
  21.     ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
  22. }
复制代码






最后一步，获取播放器（video）对象中的视频地址并编写下载按钮的单击事件

  1. $(function () {
  2.     //获取播放器（video）对象
  3.     var video = $("video");
  4.     var video_url = null;
  5.     if (video) {
  6.         video_url = video.attr("src"); //获取视频链接地址
  7.     }

  9.     //执行下载按钮的单击事件并调用下载函数
  10.     $("#down_video_btn").click(function () {
  11.         if (video_url) {
  12.             videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
  13.         }
  14.     });
  15. });
复制代码


完整代码及效果演示：

  1. // ==UserScript==
  2. // @icon            http://weibo.com/favicon.ico
  3. // @name            微博视频下载助手
  4. // @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/url]
  5. // @author          猎隼丶止戈
  6. // @description     下载微博视频
  7. // @match           *://weibo.com/tv/v/*
  8. // @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
  9. // @version         0.0.1
  10. // @grant           GM_addStyle
  11. // ==/UserScript==
  12. (function () {
  13.     'use strict';

  15.     //与元数据块中的@grant值相对应，功能是生成一个style样式
  16.     GM_addStyle('#down_video_btn{color:#fa7d3c;}');

  18.     //视频下载按钮的html代码
  19.     var down_btn_html = '<li>';
  20.     down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
  21.     down_btn_html += '<span class="pos">';
  22.     down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
  23.     down_btn_html += '<span>';
  24.     down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
  25.     down_btn_html += '<em>视频下载</em>';
  26.     down_btn_html += '</span>';
  27.     down_btn_html += '</span>';
  28.     down_btn_html += '</span>';
  29.     down_btn_html += ' <span class="arrow"><span class="W_arrow_bor W_arrow_bor_t"><i class="S_line1"></i><em class="S_bg1_br"></em></span></span>';
  30.     down_btn_html += ' </li>';

  32.     //将以上拼接的html代码插入到网页里的ul标签中
  33.     var ul_tag = $("div.WB_handle>ul");
  34.     if (ul_tag) {
  35.         ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
  36.     }

  38.     var videoTool = {
  39.         //获取文件名
  40.         getFileName: function (url, rule_start, rule_end) {
  41.                 var start = url.lastIndexOf(rule_start) + 1;
  42.                 var end = url.lastIndexOf(rule_end);
  43.                 return url.substring(start, end);
  44.             },
  45.             //弹出下载框
  46.             download: function (videoUrl, name) {
  47.                 var content = "file content!";
  48.                 var data = new Blob([content], {
  49.                     type: "text/plain;charset=UTF-8"
  50.                 });
  51.                 var downloadUrl = window.URL.createObjectURL(data);
  52.                 var anchor = document.createElement("a");
  53.                 anchor.href = videoUrl;
  54.                 anchor.download = name;
  55.                 anchor.click();
  56.                 window.URL.revokeObjectURL(data);
  57.             }
  58.     };

  60.     $(function () {
  61.         //获取播放器（video）对象
  62.         var video = $("video");
  63.         var video_url = null;
  64.         if (video) {
  65.             video_url = video.attr("src"); //获取视频链接地址
  66.         }

  68.         //执行下载按钮的单击事件并调用下载函数
  69.         $("#down_video_btn").click(function () {
  70.             if (video_url) {
  71.                 videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
  72.             }
  73.         });
  74.     });

  76. })();
复制代码




脚本发布，首先得有个 greasyfork 帐号。点击 个人中心（即自己的昵称）-->提交脚本-->按要求填写脚本信息-->提交
脚本发布



本文作者@nn200433

TM中文网 - 脚本安装指南

1、本站ZIP导入包一般命名类似为tampermonkey.cn_xxx_script.zip，一般无需解压直接导入（导入不成功则解压看是否里面还有ZIP文件，有的话再导入）。
2、JS版为代码版，可在油猴/暴力猴控制台直接添加脚本的方式把JS文件内的代码复制粘贴进去，保存即可成功安装脚本。
3、脚本导入的相关教程《油猴脚本导入教程》/《暴力猴脚本导入教程》


相关帖子( 油猴脚本/ 开发/ 发布/ 微博/ 视频下载)
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

最近更新的脚本

频道

浏览器脚本 FDM下载器 Xdown管理器

关于

初心始终 收费项 脚本导入教程

友链

Chrome插件积力工作服鸿印文化衫

免责声明

油猴中文网所发布的一切浏览器脚本及应用的帖子仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该应用，请支持开发者，若有VIP相关脚本，我们推荐您购买VIP得到更好的官方服务。（如有侵犯了您权益的应用请点此处联系我们处理）

© 2018-2020 浏览器脚本网/油猴脚本/暴力猴脚本 重庆前观科技有限公司版权所有/ 渝ICP备2022000374号-5  渝公网安备 50010602502278号
联系我们|Archiver|小黑屋|sitemap|, Processed in 0.053779 second(s), 20 queries , File On.   
快速回复 返回顶部 返回列表