wrs-download m3u8视频下载

前言

wrs-download下载m3u8视频,开始下载、暂停、下载进度,多个TS切换视频同时下载,加快下载速度,支持加密key,包含播放下载后的m3u8视频,通过开启本地http server和支持m3u8的播放器实现

功能

  • 开始下载、暂停、下载进度
  • 多个TS视频同时下载,加快下载速度
  • 支持加密key
  • 播放下载后的m3u8视频

wrs-download组件

var wrsDownload = uni.requireNativePlugin("wrs-download");
var video = {
url:'xxx',
saveDir:'xxx',
sameTimeDownloadTSCount: 2
}
wrsDownload.startDownload(video, resp => {
    console.log('m3u8 downloadProgress:' + JSON.stringify(resp) + ' url:' + video.url);
    video.progress = resp.progress;
}, resp => {
    console.log('m3u8 downloadFinish:' + JSON.stringify(resp));
    if (resp.suc) {
        console.log('m3u8 下载成功 url:' + video.url);
    } else {
        console.log('m3u8 下载失败 url:' + video.url);
    }

});

方法

  • wrsDownload.startDownload(params, progressCallback, finishCallback)函数
    params: 下载参数,包含
    url: m3u8地址
    saveDir: m3u8下载后保存到本地的目录,需要为每个视频单独指定一个文件夹来保存,不能把多个视频下载到同一个文件夹里,下载后的本地m3u8文件路径就在saveDir文件夹下的index.m3u8,所有的TS文件也在此文件夹下
    sameTimeDownloadTSCount: 支持同时下载的TS个数,受限于手机线程性能,所有的视频加起来的TS个数最好不要超过20,否则可能某些视频下载进度会特别慢,如果没有特别需要快速下载的需求,sameTimeDownloadTSCount指定为1就可以
    progressCallback: 下载进度回调
    finishCallback: 下载成功或下载失败回调

  • wrsDownload.pauseDownload(params) 暂停下载

                var video = this.videos[index];
                var params = {};
                params.url = "xxx";
                wrsDownload.pauseDownload(params);
  • wrsDownload.deleteDownload(params) 删除
                var video = this.videos[index];
                var params = {};
                params.url = video.url;
                wrsDownload.deleteDownload(video);
  • wrsDownload.getVideoInfo(params) 获取某个视频信息
            var video = this.videos[index];
                var params = {};
                params.url = video.url;
                var resp = wrsDownload.getVideoInfo(video);
  • wrsDownload.getVideoInfos() 获取所有视频信息
                var resp = wrsDownload.getVideoInfos();
  • wrsDownload.saveDownloadProgress() 下载进度实时同步到本地,一般在退出下载界面或app从前台切换到后台时调用

完整demo

index.nvue

<template>
    <div>
        <text>M3u8Demo</text>
        <view v-for="(item, index) in videos" :key="index">
            <text class="title"> m3u8视频{{index + 1}}</text>
            <button @click="download(index)">下载</button>
            <button @click="pauseDownload(index)">暂停</button>
            <button @click="deleteDownload(index)">删除</button>
            <button @click="getVideoInfo(index)">获取视频信息</button>
            <button @click="play(index)">播放本地下载的m3u8视频</button>
            下载进度:<text>{{item.progress}}</text>
            视频信息:<text>{{item.fileInfo}}</text>
        </view>
        <button @click="startHttpServer">开启本地http server</button>
        <button @click="getVideoInfos()">获取本地所有视频信息</button>
        所有视频信息:{{videoInfos}}
    </div>
</template>

<script>
    // import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
    
    var wrsDownload = uni.requireNativePlugin("wrs-download");

// httpServer本地服务插件,用于在app内生成http服务,这样就可以在本地播放下载好的m3u8视频了,参考:https://ext.dcloud.net.cn/plugin?id=5491
    var httpServer = uni.requireNativePlugin("wrs-httpserver");
    
    String.prototype.endWith = function(endStr) {
        var d = this.length - endStr.length;
        return (d >= 0 && this.lastIndexOf(endStr) == d)
    }
    export default {
        data() {
            var videoSaveDir = "";
            var absPath = plus.io.convertLocalFileSystemURL('_documents');
            // Android获取的absPath以/结尾,iOS获取的absPath不是/结尾
            if (absPath.endWith('/')) {
                absPath = absPath.substring(0, absPath.length - 1);
            }
    
            videoSaveDir = absPath;
            console.log("videoSaveDir:" + videoSaveDir);
            return {
                videoSaveDir: videoSaveDir,
                videoInfos: '',
                webUrlPath:"videoSys",
                webPort: 8030,
                videos: [{
                        url: 'https://vod3.buycar5.cn/20210411/AS69NX6j/1000kb/hls/index.m3u8',
                        saveDir: videoSaveDir + '/testVideo1',
                        sameTimeDownloadTSCount: 5,
                        progress: 0,
                        fileInfo: ''
                    },
                    {
                        url: 'http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8',
                        saveDir: videoSaveDir + '/testVideo2',
                        sameTimeDownloadTSCount: 5,
                        progress: 0,
                        fileInfo: ''
                    },
                    {
                        url: 'http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8',
                        saveDir: videoSaveDir + '/testVideo3',
                        sameTimeDownloadTSCount: 5,
                        progress: 0,
                        fileInfo: ''
                    }
                ]
            }
        },
        onLoad() {
            // 设置播放器宽高,一般宽度铺满全屏,宽高比是16:9
    
        },
        onUnload() {
            wrsDownload.saveDownloadProgress();
        },
        methods: {
            download: function(index) {
                var video = this.videos[index];
                wrsDownload.startDownload(video, resp => {
                    console.log('m3u8 downloadProgress:' + JSON.stringify(resp) + ' url:' + video.url);
                    video.progress = resp.progress;
                }, resp => {
                    console.log('m3u8 downloadFinish:' + JSON.stringify(resp));
                    if (resp.suc) {
                        console.log('m3u8 下载成功 url:' + video.url);
                    } else {
                        console.log('m3u8 下载失败 url:' + video.url);
                    }

                });
            },
            pauseDownload: function(index) {
                var video = this.videos[index];
                var params = {};
                params.url = video.url;
                wrsDownload.pauseDownload(params);
            },
            deleteDownload: function(index) {
                var video = this.videos[index];
                var params = {};
                params.url = video.url;
                wrsDownload.deleteDownload(video);
            },
            getVideoInfo: function(index) {
                var video = this.videos[index];
                var params = {};
                params.url = video.url;
                var resp = wrsDownload.getVideoInfo(video);
                video.fileInfo = JSON.stringify(resp);
            },
            getVideoInfos: function() {
                var resp = wrsDownload.getVideoInfos();
                this.videoInfos = JSON.stringify(resp);
            },
            startHttpServer: function() {
                var staticWebs = [];
                staticWebs.push({
                    urlPath: '/' + this.webUrlPath, // 站点请求的url
                    directoryPath: this.videoSaveDir, // web站点文件绝对路径,这个路径是绝对路径
                });
                var params = {
                    port: this.webPort, // 端口
                    staticWebs: staticWebs
                };
                // 启动http service
                httpServer.startServer(params, (resp) => {
                    if (resp.code == 0) {
                        console.log("httpServer启动成功:" + resp.serverHost);
                    } else {
                        console.log("httpServer启动失败:" + resp.msg);
                    }
                });
            },

            play: function(index) {
                var video = this.videos[index];
                var saveDir = video.saveDir;
                var videoSaveDir = this.videoSaveDir;
                var path = saveDir.substr(videoSaveDir.length + 1, saveDir.length);
                // http://192.168.0.93:8030/videosSys/testVideo1/index.m3u8
                var url = "http://127.0.0.1:"+this.webPort+"/"+this.webUrlPath+"/" + path + "/index.m3u8";
                console.log("url:" + url);
                uni.navigateTo({
                    url: "./player?url=" + url
                });
            },
            showMsg: function(msg) {
                this.msg = msg;
            }
        }
    }
</script>

<style>
    .title {
        text-align: center;
    }

    .btn {
        margin-top: 25rpt;
    }
</style>

player.nvue:

<template>
    <div>
<!--         wrs-videoplayer视频播放器插件,用于播放m3u8视频,参考:https://ext.dcloud.net.cn/plugin?id=4998
 -->        
        <wrs-videoplayer :config="config" :coverImage="coverImage" ref='videoPlayer' :url="url"
            :style="'width:'+width+'px;height:'+height+'px;'" @onBarrageTypeChange="onBarrageTypeChange"
            @playerPrepareToPlay="playerPrepareToPlay" @playerReadyToPlay="playerReadyToPlay"
            @playerPlayTimeChanged="playerPlayTimeChanged" @playerPlayFailed="playerPlayFailed"
            @playerDidToEnd="playerDidToEnd"></wrs-videoplayer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '',
                coverImage: 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF',
                index: 0,
                urls: [],
                height: 300,
                width: 300,
                msg: "",
                danmuTime: null,
                barrageType: 'all',
                config: {
                    autoPlay: true
                }
            }
        },
        onLoad:function(option) {
            // 设置播放器宽高,一般宽度铺满全屏,宽高比是16:9
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.width = windowWidth;
            this.height = this.width / (16.0 / 9.0);
            this.url = option.url;
            console.log("url:" + this.url);
        },
        methods: {
            playerPrepareToPlay: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            },
            playerReadyToPlay: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            },
            playerPlayTimeChanged: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            },
            playerBufferTimeChanged: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            },
            playerPlayFailed: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            },
            playerDidToEnd: function(resp) {
                var str = JSON.stringify(resp.detail);
                
            }
            }
    }
</script>

<style>

</style>


如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容