admin管理员组

文章数量:1530260

单击下载前端代码

提取器：主要功能是将输入的微博视频地址转换成可下载的视频地址，如下图所示

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%2F")) {
          try {
            if (!!JSON.parse(this.url)) {
              let str = JSON.parse(this.url);
              str = str.vurl;
              str = unescape(str);
              // 目前只能解析以 https://ugccsy.qq 打头的视频
              if (str.startsWith("https://ugccsy.qq")) {
                this.videoUrl = str;
                this.url = "";
              }
            }
          } catch (error) {}
        } else {
          // 尝试解析微博视频
          this.url.startsWith("http://t/") &&
            fetch("http://xiaogangnetworks/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的二级目录分发功能遥相呼应。

点此下载后台代码

本文标签： 腾讯视频微博vuejs

版权声明：本文标题：微博、腾讯视频(部分)提取器-- 前端Vue.js篇 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726539911a1074624.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。