更新记录

1.0.4（2025-03-16）

增加readme.md部分说明

1.0.3（2025-03-16）

增加本地m3u8文件下载支持；修订readme.md

1.0.2（2025-03-16）

readme.md配置修正

平台兼容性

使用前须知

本插件在uni-app x和uni-app原生项目上测试通过，请注意支持导入的HBuilder版本。如存在使用插件出错情况，欢迎联系我反馈。

插件引入

import { M3u82Mp4, CurrentProgress } from '@/uni_modules/cfit-m3u8'

插件使用

M3u82Mp4('https://cfitsec.cn/monologue/Monologue.m3u8',(filePath) => {
    console.log('下载完成:', filePath)
    uni.showToast({ title: '保存至: ' + filePath, icon: 'none' })
})
//获取一次ts文件下载进度
CurrentProgress((progress) => {
    console.log("Progress:", progress)
})

下载成功会返回形如/storage/emulated/0/Android/data/io.dcloud.uniappx/files/Download/video_1742051459918.mp4的文件路径，失败则统一返回null，可手动判断成功与否。 也可以传入本地m3u8文件，使用file://开头即可。 示例：

M3u82Mp4('file:///storage/emulated/0/Download/monologue/monologue.m3u8',(filePath) => {
    console.log('下载完成:', filePath)
    uni.showToast({ title: '保存至: ' + filePath, icon: 'none' })
})
//获取一次ts文件下载进度
CurrentProgress((progress) => {
    console.log("Progress:", progress)
})

其中/storage/emulated/0/Download/monologue/monologue.m3u8为实际本地路径名。 注意：经本人测试，由于部分浏览器缓存的m3u8不包含ts拓展名，而uni-app x的申请权限功能尚未完善，所以部分浏览器的缓存视频转换在uni-app x运行异常；此时注意查看日志。uni-app运行无影响。

示例代码

可部署插件后在index.vue测试如下代码：

<!--index.vue-->
<template>
    <view class="content">
        <input class="input" v-model="url" placeholder="Enter M3u8 URL. . ." confirm-type="send" />
        <button class="action-btn" @click="display">展示/隐藏视频</button>
        <view v-if="isshow" class="video-container">
            <video class="video-player" :src="url"></video>
            <text class="url-text">{{url}}</text>
        </view>
        <button class="action-btn" @click="download" :disabled="start">下载文件</button>
        <text class="url-text" v-if="start">ts下载进度：{{ progress }} %</text>
        <text class="url-text" v-if="path!=''">下载的mp4路径：{{ path }}</text>
        <button class="action-btn" v-if="path!=''" @click="open">保存到相册</button>
    </view>
</template>

<script>
    // 引入插件
    import { M3u82Mp4, CurrentProgress } from '@/uni_modules/cfit-m3u8'

    export default {
        data() {
            return {
                url: 'https://cfitsec.cn/monologue/Monologue.m3u8',
                isshow: false,
                path: "",
                interv: 0,
                start: false,
                progress: 0
            }
        },
        onLoad() {

        },
        methods: {
            display() {
                this.isshow = !this.isshow;
            },
            download() {
                var that = this;
                uni.showLoading({
                    title: '下载中. . .'
                })
                this.start = true;
                M3u82Mp4(
                    that.url,
                    (filePath) => {
                        this.start = false;
                        uni.hideLoading();
                        try {
                            clearInterval(that.interv)
                        } catch (_) {

                        }
                        console.log('下载完成:', filePath)
                        uni.showToast({ title: '保存至: ' + filePath, icon: 'none' })
                        that.path = filePath;
                    }
                )
                this.interv = setInterval(function () {
                    CurrentProgress((progress) => {
                        console.log("Progress:", progress)
                        that.progress = progress;
                        if (progress == 100) {
                            try {
                                clearInterval(that.interv)
                            } catch (_) {

                            }
                        }
                    })
                }, 50)
            }, open() {
                uni.saveVideoToPhotosAlbum({
                    filePath: this.path,
                    success: (_) => {
                        uni.showToast({
                            position: "center",
                            icon: "none",
                            title: "视频保存成功，请到手机相册查看"
                        });

                    },
                    fail: (_) => {
                        uni.showToast({
                            position: "center",
                            icon: "none",
                            title: "保存失败"
                        });
                    }
                });
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40rpx 30rpx;
        background-color: #f8f8f8;
    }

    .input {
        padding: 20px;
        margin: 20px;
        height: 60px;
        border: 1px solid #e5e5e5;
        border-radius: 35rpx;
        background: #fff;
    }

    .action-btn {
        width: 80%;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        background: #007AFF;
        color: white;
        font-size: 32rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
    }

    .download-btn {
        background: #34C759;
        box-shadow: 0 4rpx 12rpx rgba(52, 199, 89, 0.3);
    }

    .video-container {
        width: 100%;
        margin: 40rpx 0;
        background: white;
        border-radius: 16rpx;
        padding: 20rpx;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    }

    .video-player {
        width: 100%;
        height: 400rpx;
        border-radius: 12rpx;
        overflow: hidden;
        background: black;
    }

    .url-text {
        margin-top: 30rpx;
        padding: 20rpx;
        background: #f4f4f4;
        border-radius: 8rpx;
        font-size: 26rpx;
        line-height: 1.6;
        color: #0066ff;
    }
</style>