提取器:主要功能是将输入的微博视频地址转换成可下载的视频地址,如下图所示
JS部分代码
export default {
name: "app",
components: {},
data() {
return {
url: "", //用户输入的原始视频地址
videoUrl: "", //解析后的视频地址
};
},
methods: {
//【提交】事件
videoSaveAsHandler: function() {
if (!!this.url) {
// 腾讯视频下载
if (this.url.includes("https%3A%2F%2Fv.qq.com%2F")) {
try {
if (!!JSON.parse(this.url)) {
let str = JSON.parse(this.url);
str = str.vurl;
str = unescape(str);
// 目前只能解析以 https://ugccsy.qq.com 打头的视频
if (str.startsWith("https://ugccsy.qq.com")) {
this.videoUrl = str;
this.url = "";
}
}
} catch (error) {}
} else {
// 尝试解析微博视频
this.url.startsWith("http://t.cn/") &&
fetch("http://xiaogangnetworks.com/getVideo?videourl=" + this.url)
.then(response => response.text())
.then(data => {
this.url = "";
this.videoUrl = data;
})
.catch(e => console.log("Oops, error", e));
}
}
}
}
};
知识点
try catch可确保JSON.parse遇到无法解析的JSON字符时不报错,而是静默失败。
escape: 是将部分特殊字符,如空格、/ 等转义化。unescape之反之。
最常见的为,’ ‘即空格转码成 %20 , ‘/’ 转码成 %2F
从网上搜索得知,部分腾讯视频的下载地址可以在前端直接处理。
微博视频的下载地址就相对麻烦一些,因为它走了2次http 302重定向。
所以需要与后台Node.js互动,由后台拿到实际的下载地址然后再返回给前端。
vue.config.js
中的重点代码publicPath: process.env.NODE_ENV === 'production' ?
可以区分开发环境下和打包环境中静态资源的路径前缀,它可以与Node.js的二级目录分发功能遥相呼应。