如何解析youku的m3u8文件，拿到mp4文件？

Posted 2023-04-12

其实m3u8是个列表文件，所有的原始视频文件都被下载到一个隐藏文件夹了。
你点击m3u8文件就会自动把这些视频文件链接在一起播放，可以用notepad++打开m3u8文件查看内容，里面是一个个本地文件的链接，这些链接指向一个个小视频文件，也就是说你找不到原来下载这个文件的网址了。
如果想直接播放完整的原始视频文件就要找到那个文件夹，里面的视频文件是一段一段的，要把这些小视频文件按m3u8文件里面的顺序用qq影音合并成一个完整的视频文件，然后就可以播放了。
当然，如果删除了那个隐藏文件夹，那这个m3u8文件也就没用了，点击播放会提示解析失败。
那个隐藏文件夹可以直接在m3u8里面看到位于哪里，是个.开头的隐藏文件夹。 参考技术A 【亲试觉得有效】在QQ浏览器——文件下载——我的文件——视频里面可以找到“m3u8”格式的视频，长按进行编辑，重命名mp4后会自动将片段合成一个完整的mp4视频 参考技术B 最新的手机QQ浏览器可以播放网页上缓存的m3u8视频。无论是ios设备还是android设备，只要安装了最新的手机QQ浏览器。

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

来看一个故事。

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

首先，需要文件选择，可以自己封装一个组件，当然也可以使用elementUI中的el-upload组件，一切随缘。

我选择了第一种，创建一个FileSelector.vue工具组件。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
       text 
    </el-button>
  </div>
</template>
<script>
export default 
  props: ["text"],
  data() 
    return 
      style: "",
      jsonObj: ,
    ;
  ,
  mounted: function () 
    if (this.text == "添加附件") 
      this.style = "tjfj";
    
  ,
  methods: 
    async handleFileChange(e) 
      if (this.text == "选择文件" && e.target.files[0] != null) 
        this.$emit("input", e.target.files[0]);
       else 
        this.$emit("input", e.target.files);
      
    ,
    oninput() 
      this.$refs["file"].click();
    ,
  ,
;
</sript>
<style>
.tjfj 
  float: right;

</style>

父组件中应用

  <file-selector
        v-model="otherAttachmentList"
        :text="texttype2"
  ></file-selector>

好了，现在file-selector组件已经拿到xml文件，但是要怎样操作才能拿到具体想要的值嘞？

我尝试了很多方法，第一种(网上搜的)，new一个新的DOMParser() 构造函数，新建一个 DOMParser 对象实例，使用parseFromString（）方法，parseFromString（）方法解析包含 HTML或XML 的字符串。

getXMLNode(parm)
      let str=parm.xmlStr;
      //创建文档对象
      //DOMParser() 构造函数新建一个 DOMParser 对象实例。此对象可用于使用该方法分析文档的文本。
      //parseFromString（）方法解析包含 HTML或XML 的字符串，返回 HTMLDocument或XMLDocument
      let xmlDoc = new DOMParser().parseFromString(str, "text/xml");
      let finds=xmlDoc.getElementsByTagName('find');   //获取find节点
      for (let i=0;i<finds.length;i++)     //循环节点
        let finder = finds[i];
        let nods = finder.childNodes;       
        for (let j=0;j<nods.length;j++)    //循环子节点
          let child = nods[j]
          if (child.nodeType == 1)         //判断是否是标签
            console.log(child.nodeName+":"+child.firstChild.nodeValue)  
            // console.log(child.nodeName+child.innerHTML);   
            //两种方法取值
          
        
      
      return finds
    

网页不允许呀，搜了很多文章（浏览这篇文章https://www.cnblogs.com/DOMLX/p/7822962.html），才知道是因为目前的主流浏览器都不支持解析本地的XML的文件，应该是为了一些安全问题之类的，不能够直接的去解析XML文件。所以这个方法彻底失败。

第二种方法，就是既然能拿到文件，读不出xml文件的内容，那就干脆把他转为文本格式，这样就能直接拿到文本内容，但是拿到文本内容，需要读取里边的值，应该怎样拿到相应的值嘞？

我能想到的是使用正则匹配，还有一种，是下载x2js依赖，然后我使用的是下载依赖，使用这个对象直接将内容转化成json对象，接下来展示，我怕直接放方法有的读者看不懂，所以我直接放代码，有点冗余，见谅。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
       text 
    </el-button>
  </div>
</template>
<script>
export default 
  props: ["text"],
  data() 
    return 
      style: "",
      jsonObj: ,
    ;
  ,
  mounted: function () 
    if (this.text == "添加附件") 
      this.style = "tjfj";
    
  ,
  methods: 
    async handleFileChange(e) 
      if (this.text == "选择文件" && e.target.files[0] != null) 
        await this.getXMLNode(e.target.files[0]);
        this.$emit("input", e.target.files[0]);
       else 
        await this.getXMLNode(e.target.files);
        this.$emit("input", e.target.files);
      
    ,
	// 拿到xml文件，并使用x2js解析该文件拿到相应的值。
    getXMLNode(parm) 
      let reader = new FileReader();
      reader.readAsText(parm[0], "UTF-8");
      let _self = this;
      reader.onload = function () 
          // .annotation.object这个是我文件内容里的东西，根据个人而定。
        this.jsonObj = _self.$x2js.xml2js(this.result).annotation.object;
        // console.log(this.jsonObj);
        // console.log(this.jsonObj["name"]);
        // console.log(this.jsonObj.name);
      ;
    ,
    oninput() 
      this.$refs["file"].click();
    ,
  ,
;
</script>
<style>
.tjfj 
  float: right;

</style>