uniapp播放mp4省流方案

背景:

因为项目要播放一个宣传和讲解视频,视频文件过大,同时还为了节省存储流量,想到了一个方案,用m3u8切片替代mp4。

m3u8:切片播放,可以理解为一个1G的视频文件,自行设置文件分割大小,通过切片,把视频1G分割成若干个小片段,播放的时候由.m3u8文件来指定在某个时间节点播放某个切片,好处就是拖动进度条不需要下载1G的文件,只需要根据m3u8记录的拖动时间的.ts文件进行下载播放。

mp4:文件流,下载完之后再播放,这个1G先转圈圈下载,下载完之后再播放。

实现切片,需要两步

一、安装工具

首先我们需要下载所需的工具(ffmpeg)

https://www.gyan.dev/ffmpeg/builds/

将这三个文件放置:

C:\Windows\System32

管理员CMD运行:ffmpeg

安装成功!

二、切片

操作命令有很多,可自行查找,这条是一个简单的切片命令。

ffmpeg -i 0.mp4 -codec copy -hls_list_size 0 -strict -2 -f hls G:\项目\郑好匠\video.m3u8

三、上传存储

视频播放地址:https://xxxxxxroutine/video/1/video.m3u8

相关推荐
bug总结13 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
天府云创14 小时前
uni-app X 蒸汽模式发布!性能比肩原生~
前端框架·uni-app·移动开发·原生应用·蒸汽模式·app研发·多端适配
堕落年代17 小时前
uni-app x 蒸汽模式:实时流式语音识别(ASR)三大疑难杂症全记录
人工智能·uni-app·语音识别
RisunJan1 天前
uni-app 高频面试题与解答
uni-app
梦曦i1 天前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
2501_915106322 天前
iOS数据采集技术详解:从性能监控到崩溃分析的全链路实践
android·ios·小程序·https·uni-app·iphone·webview
我爱写代码i3 天前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW3 天前
vite-plugin-uni-pages 更新了什么
前端·uni-app
2501_915918413 天前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
梦曦i3 天前
create-uni-app v1.2.0:交互体验优化
前端·uni-app