uniapp - 视频播放器插件，支持播放m3u8 / flv / mp4视频流等各种格式的视频文件，附带全屏播放、播放快进、循环播放、音量调节、视频解码等功能（详细示例代码，一键复制开箱即用！）

已于 2025-01-16 15:16:28 修改
阅读量1.1w 收藏 16
点赞数 6
分类专栏： 前端组件与功能(开箱即用) uniapp组件与功能(工作经验) uniapp常见问题解决 文章标签： uniapp视频播放器插件组件 uniapp播放m3u8视频流 uniapp播放flv格式视频 uniapp播放直播视频流文件 uniapp如何播放各种视频文 uniapp小程序h5网页视频 安卓苹果ios播放m3u8
于 2023-08-02 16:39:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/132065549
版权
在uniapp开发中，使用mui-player插件创建一个兼容全平台的视频播放器，支持m3u8、flv、mp4等格式，具备全屏、循环播放、快进、音量调节等功能。提供详细步骤和完整代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，实现一个好看精美的视频播放器，可全屏播放循环播放调节播放速度等功能。

uniapp Vue3和Vue2都能用，提供详细示例运行代码，新手小白直接复制稍微改下就能使用。

在这里插入图片描述
在这里插入图片描述

功能实现

uniapp 开发的

了解本专栏 订阅专栏 解锁全文
uniapp 使用 mui-player 插件播放 m3u8/flv 视频流
一步一个脚印，踏实努力，向着目标前进
08-23 7145
请注意，以上方法中的视频流地址需要确保有效性和可访问性，并根据需要进行样式和功能的自定义。另外，uni-mpvue-player和uni-video插件的具体使用方法和配置请参考插件的文档，原生小程序组件的使用方法请参考小程序开发文档。以上步骤将在UniApp中使用mui-player插件播放M3U8/FLV视频流。请注意，确保视频流地址的有效性和可访问性，以及根据需要进行样式和功能的自定义。除了使用mui-player插件外，UniApp中还可以使用其他播放器插件或原生组件来播放视频流。
uniapp原生插件-YL视频播放器案例源码
09-22
uniapp原生插件-YL视频播放器案例源码，案例包括播放器的基本使用方法，在线教育场景，小视频（仿抖音）场景，朋友圈场景等...
uni-app-video视频播放器插件
最新发布
gitblog_06714的博客
04-16 546
uni-app-video视频播放器插件 【下载地址】uni-app-video视频播放器插件 uni-app-video是一款功能强大的视频播放器插件，支持全平台（包括iOS和Android）的视频播放，并具备后台播放音频的能力，显著提升用户体验。它兼容多种视频格式，提供自定义播放器样式，支持手势控制音量、亮度和播放进...
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
08-12
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
uniapp原生插件-YL视频播放器
白玉梁的专栏
09-29 8241
YL视频播放器是一款适用于安卓端的高性能原生插件（支持3核心切换（exo，ijk，安卓原生），支持点播录播，小窗播放，支持各种视频播放常用功能，适用于各种常见播放场景如在线教育，小视频，朋友圈等等！
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
uni-app-video(支持后台播放音频的视频播放器).zip
uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档
qq_38188228的博客
11-24 5279
uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档。
Uni-App Video 插件教程
gitblog_01197的博客
08-19 1095
Uni-App Video 插件教程 uni-app-video一个优秀的uni-app影视视频源码项目案例分享，旨在帮助大家更快的上手uniapp视频类项目，个人网站: https://zhaohongcheng.com项目地址:https://gitcode.com/gh_mirrors/un/uni-app-video 1. 项目介绍 Uni-App Video 是一个专为基于 Vue...
uniapp 安卓视频播放器原生插件
夜中雨滴的专栏
03-17 1088
安卓视频播放器原生插件，支持自定义播放器内核，支持直播拉流，rtmp，rtsp，m38u等流文件播放。
uniapp 视频播放（点播、直播、悬浮窗、重力感应、滑动调节）组件 Ba-Video
三杯五岳
05-16 3696
Ba-Video 是原生视频播放组件。支持点播、直播；支持悬浮窗、全屏、小屏；支持封面、显示比例；支持滑动调节播放进度、声音、亮度（全屏）；支持快进、回退、倍速播放；支持重力感应、视频截图；支持无缝衔接播放等。
uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称
09-10
uni-app在Android平台上录制视频，支持设置分辨率和视频名称，有取消、重录和完成功能 视频录制 视频设置分辨率 Android录制视频 资源包中有demo源码和相关操作文档
java实现rtsp/rtmp转m3u8/flv/hls/mp4等实现web直播和回放测
08-10
Java 实现 RTSP/RTMP 转 M3U8/FLV/HLS/MP4 等技术在Web直播和回放中的应用是现代互联网流媒体服务的关键组成部分。RTSP（Real-Time Streaming Protocol）和RTMP（Real-Time Messaging Protocol）主要用于实时视频...
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
java实现rtsp/rtmp转m3u8/flv/hls/mp4等实现web直播和回放
08-20
Java 实现 RTSP/RTMP 转 M3U8/FLV/HLS/MP4 是网络直播和视频回放的重要技术，它涉及到多种协议、工具和格式的交互。在这个场景下，Java 通常作为后端处理服务器，处理来自不同来源（如海康、大华等监控设备）的实时...
uniapp(全端兼容) - 最新详细实现视频播放器用第一帧当封面功能，uniapp如何在全平台实现截取视频第一帧作为视频封面，获取视频组件video第一帧作为图片当封面教程（详细示例代码，一键复制）
高级前端工程师
05-16 1万+
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，视频封面，video，uniapp video视频组件封面，截取第一帧为视频封面图，如何获取视频的第一帧并转为图片，uniApp截取视频第一帧的图片,获取视频的第一帧作为封面图，uni-app App和H5平台上传视频截取视频第一帧生成图片，如何拿到视频的第一帧图片，视频播放器中怎么截图第一秒的图片当作封面，nvue获取视频第一帧做封面，renderjs，从本地上传视频展示第一帧
手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现
sfsgtc的博客
04-25 4097
本人对官方原生插件离线包进行修改，封装了一个video控件，可实现任意大小的缓存。
uniapp(全端兼容) - 最新详细实现接入腾讯视频播放器功能插件，uniapp全平台端（小程序/H5网页/App/nvu）调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
热门推荐
高级前端工程师
05-15 1万+
uniapp腾讯视频，uniapp微信小程序腾讯视频，uniapp小程序接入腾讯视频详细示例教程源码，uniapp怎么在微信小程序平台使用腾讯视频插件，在uni-app中使用腾讯视频插件播放视频，uniapp调用腾讯视频，uniapp引入腾讯视频插件，uniapp小程序中引入腾讯视频无法播放，uniapp微信小程序平台引入腾讯视频播放不了黑屏，在uniapp开发的微信小程序中使用腾讯视频，uniapp如何引入腾讯视频插件播放视频，uni-app小程序平台引入腾讯视频插件播放腾讯视频，uniapp 小程序接入
uniapp项目播放m3u8（hls）视频
woxingliu2018的博客
12-11 1万+
①uniapp项目，运行在手机浏览器端，需要播放m3u8类型视频。在网上找了好久教程，记录一下实现过程。②最开始使用的是videojs，后来改用MuiPlayer，两种方式都记一下。③m3u8就是hls。④在线播放m3u8视频： https://m3u8play.com/、http://tool.liumingye.cn/m3u8/（第一个播放速度比较快）⑤用来测试的m3u8视频地址：https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8。
uniapp 视频播放器
09-15
在uniapp中使用视频播放器组件，可以通过引入第三方插件或使用uniapp自带的视频标签进行实现。如果你想要播放m3u8、flv或mp4格式的视频流，你可以使用mui-player插件或video标签来实现。具体步骤如下： 1. 引入mui-player插件：首先，在你的项目中引入mui-player插件。你可以通过uni-app插件市场搜索安装该插件。 2. 使用mui-player插件播放m3u8/flv视频流：在页面中使用<mui-player>标签，并将视频流的地址赋值给src属性即可实现播放。例如： ``` <template> <view> <mui-player src="http://xxx.m3u8" type="m3u8"></mui-player> </view> </template> ``` 3. 使用video标签播放视频：如果你想使用uniapp自带的video标签来播放视频，你可以按照以下步骤操作： - 首先，在页面中添加<video>标签，设置src属性为视频的地址。 - 如果要播放m3u8格式的视频，你需要使用第三方库或插件进行解码。你可以使用videojs插件来构建H5直播播放器，然后使用<mui-player>或<video>标签来播放m3u8视频流。 - 如果要播放flv格式的视频流，你可以参考uniapp的视频播放器插件或使用video标签，并结合相关的解码库来实现。 4. 其他功能：根据需求，你可以根据插件或标签的文档来实现其他功能，如全屏播放、播放快进、循环播放、音量调节、视频解码等。 总结起来，你可以通过引入第三方插件（如mui-player）或使用uniapp自带的video标签结合相关的解码库来实现在uniapp中播放各种格式的视频。具体使用哪种方法取决于你的需求和项目的具体情况。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值