M3u8

背景苹果手机QQ浏览器下载视频很不便，有时咱们心愿可能导出，并且合并m3u8格局的视频（m3u8视频常常被合成为多个.ts文件）。 本文以iPhoneXR，PC零碎为Windows 11为例，接下来介绍如何操作。 步骤导出第一步合成为首先将m3u8的视频文件导出到电脑。 在PC上装置软件iExplorer 这个软件的作用是将m3u8视频（多个ts视频导出到本地）。安装包，过程就略过。分享一个我的安装包： 链接：https://pan.baidu.com/s/1m3VRyT7iYuBNJBBKC1FKXA?pwd=w0cs 提取码：w0cs导出文件夹 装置实现后，手机USB线连贯电脑，门路位于Apps/QQ浏览器/files/Videos，右键Export能够导出文件至本地 导出后咱们能够发现，文件夹内除了.ts文件，还有index.m3u8和local.m3u8这2个文件。其中第一个很重要。合并ts文件有了ts文件，尽管能够间接播放，然而咱们还是心愿能合并成1个文件。 装置ffmpeg 对于ffmpeg的介绍，能够自行百度。咱们用它来合并ts文件成一个mp4文件。 装置能够去官网下载，这里我也提供了我下载的版本： 链接：https://pan.baidu.com/s/1gvZnHvucnNtE5CcwaDwCYA?pwd=75dn 提取码：75dn解压后，配置零碎的环境变量，讲bin文件夹的门路加至PATH 控制台测试是否装置胜利，控制台输出ffmpeg，看到如下输入则胜利！ 执行命令合并 有2个命令，具体执行哪个命令取决于文件夹内是否有keyfile_0.key这个文件。 文件夹无keyfile_0.key 在ts文件所在文件夹内关上控制台，输出如下命令 ffmpeg.exe -i index.m3u8 -c copy 001.mp4命令运行完后，001.mp4就是咱们要的最终文件！ 文件夹有keyfile_0.key ffmpeg.exe -allowed_extensions ALL -i ./index.m3u8 -c copy 001.mp4总结PC为MAC零碎也可参照此办法，思路都是统一，先导出ts文件，而后利用ffmpeg合并。

vue + videojs 处理 m3u8 的坑：坑后面再说，先让m3u8运行起来， 第一步：首先vue的index.html 引入<link href="http://cdn.bootcss.com/video....; rel="stylesheet" /> <script src="http://cdn.bootcss.com/video....;></script> <script src="http://cdn.bootcss.com/videoj...;></script> 这3个东西，我觉得这几个很重要！ 第二步：然后在xxx.vue使用：<video id="hls-video" width="1024" height="576" class="video-js vjs-default-skin" playsinline webkit-playsinline controls preload="auto" x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5" > <source src="your addr" type="application/x-mpegURL" > </video>第三步：js中的mouted()实例化：var player; player = videojs('hls-video'); 补充：在methods中可以用：player.play()播放；player.pause()暂停。 坑来了！：如果你第一次渲染，完全没问题，如果从这个页面跳spa到别的页面，再跳回来，bug出现了！ 为什么会有红字error？我做错了什么？因为你没有销毁这个东西！ 在本页面xxx.vue 中加上： beforeDestroy: function () { player.dispose();}, 完美解决！这个东西真的太坑了！ 感谢大家的支持！！谢谢

现在很多视频网站播放流视频，都不是采用mp4／flv文件直接播放，而是采用m3u8/ts这种方式播放。简单说就是，网站后台把视频切片成成百上千个xx.ts文件，一般10秒一个，每个都几百kb很小。然后通过xx.m3u8播放列表把这些文件连接起来。通过Chrome DevTool的Network栏，我们可以清楚的看到加载过程：我们直接点击这个playlist.m3u8播放列表文件，在旁边的preview栏中查看内容，可以看到：#EXTM3U#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:0#EXT-X-ALLOW-CACHE:YES#EXT-X-TARGETDURATION:11#EXTINF:5.250000,out000.ts#EXTINF:9.500000,out001.ts#EXTINF:8.375000,out002.ts#EXTINF:5.375000,out003.ts#EXTINF:9.000000,out004.ts………..那我们怎么下载呢？下载视频所有的ts切片文件一般的思路是，想办法把所有的ts切片文件下载下来，然后合成一个完整的视频。然而，配合xx.m3u8播放列表文件，我们可以直接用ffmpeg在线下载播放列表中所有的视频，然后直接用ffmpeg合并为一个视频。我们就直接执行这一句命令即可：$ ffmpeg -i <m3u8-path> -c copy OUTPUT.mp4$ ffmpeg -i <m3u8-path> -vcodec copy -acodec copy OUTPUT.mp4# 例如：ffmpeg -i https://v6.438vip.com/2018/10/17/3JAHPTdvPhQb9LrE/playlist.m3u8 -c copy OUTPUT.mp4然后就会看到这样的下载过程：为什么下载播放列表就能下载所有的切片文件？因为播放列表里的都是相对路径，既然我们有了播放列表的绝对路径，那么其它所有文件的绝对路径也就不难获取了。好在ffmpeg直接实现了这种播放列表一键下载的方式。