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

已于 2024-07-29 11:30:26 修改
阅读量8.1k 收藏 9
点赞数 6
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp视频播放器插件组件 uniapp播放m3u8视频流 uniapp播放flv格式视频 uniapp播放直播视频流文件 uniapp如何播放各种视频文 uniapp小程序h5网页视频 安卓苹果ios播放m3u8
于 2023-08-02 16:39:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/132065549
版权
在uniapp开发中，使用mui-player插件创建一个兼容全平台的视频播放器，支持m3u8、flv、mp4等格式，具备全屏、循环播放、快进、音量调节等功能。提供详细步骤和完整代码示例。
摘要由CSDN通过智能技术生成

效果图

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

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

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

功能实现

uniapp 开发的

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uni-app实战视频点播app小程序
08-28
适用人群具有Html+Css+JavaScript基础，有一定的Vue.js基础，挑战高薪职位课程概述本季度为uni-app + egg.js 实战视频点播类app、小程序和H5全栈开发，另外还会结合subNVue实现自定义播放器组件，vuex管理项目状态，腾讯云点播 VOD转码处理和分发加速等。一次开发，同时搞定Android、iOS、小程序和H5端等。
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
dplayer和/hybrid/html/videoPlay.html
uniapp视频播放器（h5+app）
farme_guan的博客
04-27 3656
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
uniapp(微信小程序)播放flv视频(萤石云视频)解决方案(使用web-view组件完美适配)
qq_63189148的博客
07-17 1282
现在我们的项目需要能够在微信小程序中播放萤石云摄像头的直播以及录播视频，但是官方提供的组件要么就是原生的微信小程序，uniapp无法直接使用，要么就是提供的uniapp方案只能h5页面下使用，而且要引入一堆文件才行，还有的方案就是使用萤石云的自定义组件，但是无法按照我们自己的需求来设置页面了，因此我们准备将所有视频链接转换成flv视频流（调用萤石云api，自行上官方文档查看），只要能够在微信小程序中播放flv视频，就能完成我们的需求。在尝试了多种方法之后，我整出了一个能够完美适配微信小程序页面的播放方法。
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
08-12
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
uni-app中引入腾讯视频插件，播放腾讯视频
kouryoushine的博客
11-06 8028
配置微信小程序插件 注意事项 正式开始使用微信小程序插件之前需先在微信公众平台 -> 设置->第三方设置 -> 插件管理处添加插件 要保证项目内微信小程序appid和申请插件的微信小程序appid一致插件才可使用 引入插件代码包 使用插件之前开发者需要在manifest.json中的mp-weixin内声明使用的插件，具体配置参照所用插件的开发文档 /* 小程序特有相关 ...
uni-app 播放m3u8格式视频
WYWEBGO的博客
05-25 1343
【代码】uni-app 播放m3u8格式视频。
uniapp原生插件-YL视频播放器
白玉梁的专栏
09-29 7539
YL视频播放器是一款适用于安卓端的高性能原生插件（支持3核心切换（exo，ijk，安卓原生），支持点播录播，小窗播放，支持各种视频播放常用功能，适用于各种常见播放场景如在线教育，小视频，朋友圈等等！
uniapp 使用 mui-player 插件播放 m3u8/flv 视频流
热门推荐
国企程序媛 record 前端技术 & review code。。。
03-15 1万+
uniapp h5项目 pc/移动端 播放m3u8/flv 视频地址的视频流
uniapp m3u8格式视频加载
qq_27909209的博客
05-15 5009
浅析HTML5点播m3u8(hls)格式视频和flv.js播放flv视频流_技术分享_五块二这两年来越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。查看演示：https://www.helloweba.net/demo/2018/hls/项目地址：https://github.com/video-dev/hls.js。
uniapp音视频播放功能实现
Lucky_wu24的博客
06-09 6959
媒体播放器组件提供播放音视频媒体文件的能力，并且支持将播放的媒体文件的音画数据推流出去。
uniapp npm引入Dplayer与hls解析播放m3u8格式视频
09-08
uniapp npm引入Dplayer与hls解析播放m3u8格式视频
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）主要用于实时视频...
iOS 视频播放（支持mp4,avi,rmvb.3gp,mov,flv,m3u8,rm）
07-15
标题提到的"iOS 视频播放（支持mp4,avi,rmvb.3gp,mov,flv,m3u8,rm）"表明这是一个针对多种视频格式播放的解决方案，覆盖了广泛的视频文件类型，包括常见的mp4、avi、rmvb、3gp、mov、flv，以及适应网络流媒体的m3u8...
java实现rtsp/rtmp转m3u8/flv/hls/mp4等实现web直播和回放
08-20
Java 实现 RTSP/RTMP 转 M3U8/FLV/HLS/MP4 是网络直播和视频回放的重要技术，它涉及到多种协议、工具和格式的交互。在这个场景下，Java 通常作为后端处理服务器，处理来自不同来源（如海康、大华等监控设备）的实时...
uniapp中封装自定义video播放器（控制器）
最新发布
weixin_65116989的博客
08-14 431
实现video播放器修改默认播放暂停按钮图片，进度条，全屏播放图标，并且保留原有功能
uniapp视频播放功能
cunning_of_fox的博客
02-01 1544
uniapp制作视频播放器
手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现
sfsgtc的博客
04-25 2674
本人对官方原生插件离线包进行修改，封装了一个video控件，可实现任意大小的缓存。
Uniapp微信小程序视频全屏播放功能极简实现法_uniapp视频全屏播放
2401_85015191的博客
05-14 809
PS：由于拖动进度条的时候视频仍处于播放中，进度状态不停的在更新，会导致拖动时有闪动的情况，所以需要在拖动开始时暂停视频，在拖动结束后再播放，但是uniapp的slider组件没有拖动开始的属性，只有sliderChanging，它会在拖动中高频率触发，所以我们写一个节流函数让它3秒只触发一次暂停视频，减少不必要的内存消耗。模拟点击事件，即当拖动的距离足够小时，直接记录当前y坐标，获取视口高度，得出当前y坐标在整个视口的相对位置，并且把进度条调到整个进度条的同比相对位置。
java 通过htpp链接将flv视频流转成m3u8 格式实时播放
05-24
要实现这个功能，你需要使用 Java 中的一个 HTTP 客户端库，例如 Apache HttpClient 或 OkHttp，以及一个支持视频转码的服务（例如 FFmpeg）。 以下是大致的实现步骤： 1. 使用 HTTP 客户端库从指定的 URL 获取 FLV 视频流。 2. 将 FLV 视频流转换为 M3U8 格式。这可以通过运行 FFmpeg 命令来完成，例如： ``` ffmpeg -i input.flv -c copy -hls_time 10 -hls_list_size 0 output.m3u8 ``` 这个命令将 FLV 文件转换为 M3U8 格式，每个分片长度为 10 秒，并且不限制分片数量。输出文件名为 output.m3u8。 3. 将生成的 M3U8 文件和对应的分片文件上传到一个 Web 服务器上，例如 Apache 或 Nginx。 4. 在客户端使用一个 HTML5 播放器（例如 Video.js）来播放 M3U8 格式的视频流。你可以使用以下 HTML 代码来嵌入视频流： ``` <video-js id="video-player" class="vjs-default-skin" controls preload="auto" width="640" height="480" data-setup='{"fluid":true}'> <source src="http://your-server.com/path/to/output.m3u8" type="application/x-mpegURL"> </video-js> ``` 这个代码会在页面上展示一个视频播放器，播放器将从指定的 URL 加载 M3U8 文件，并自动加载和播放分片文件。 需要注意的是，视频转码可能会消耗大量的计算资源和时间，因此你需要根据自己的需求来选择适合的服务器配置和转码参数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值