uniapp播放 m3u8格式视频兼容pc和移动端

最新推荐文章于 2024-04-19 11:05:53 发布

sunyin.liu

最新推荐文章于 2024-04-19 11:05:53 发布

阅读量628

点赞数 1

分类专栏： uniapp Vuejs 文章标签： uni-app 音视频

本文链接：https://blog.csdn.net/weixin_42066070/article/details/135022005

版权

Vuejs 同时被 2 个专栏收录

68 篇文章 20 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

uniapp

21 篇文章 34 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

支持全自动播放、设置参数

自己摸索出来的，花了一天时间，给点订阅支持下，订阅后，不懂的地方可以私聊我。

代码实现

代码实现

1.安装dplayer组件

npm i dplayer

2. static/index.html下引入 hls

引入hls.min.js 可以存放在static项目hls下面

<script src="/static/hls/hls.min.js"></script>

3. hsl.min.js

去网上百度一堆

4.static/index.html下引入 video.min.js

了解本专栏

订阅专栏解锁全文

超级会员免费看

优惠劵

sunyin.liu

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
uniapp播放 m3u8格式视频兼容pc和移动端

自己摸索出来的，花了一天时间，给点订阅支持下，订阅后，不懂的地方可以私聊我。
复制链接

扫一扫

专栏目录

订阅专栏

uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频

11-15

dplayer和/hybrid/html/videoPlay.html

java将m3u8格式转成视频文件的方法

08-19

主要介绍了如何java将m3u8格式转成视频文件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

uniapp m3u8格式视频加载

qq_27909209的博客

05-15

4334

浅析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 H5 使用mui-player插件播放hls格式监控视频流

最新发布

前端小跑堂的博客

04-19

347

uniapp H5环境使用mui-player视频播放器，视频流hls格式，自定义控件、返回事件、视频加载、视频播放错误等事件监听

uni-app app端.m3u8类型流的播放

时光淡然

08-30

2268

app端通过web-view，实现.m3u8l类型的视频流播放

uniapp H5 项目播放 m3u8格式视频

zxh7770的博客

04-11

7886

uniapp H5 项目播放 m3u8格式视频阐述在项目中，可能会获取一些直播流地址，比如最常见的就是.m3u8视频格式。在小程序可以直接使用video 标签就可以直接播放，因为小程序有自己的引擎，可以直接使用。H5页面是运行在浏览器上面的，不能直接播放。解决方案安装以下依赖 Dplayer.js、hls.js npm i dplayer -S npm i hls.js -S ps：如果版本太高了，可以指定以下版本安装即可。指定 Dplayer.js、hls.js 版本 { "depe

uniapp项目播放m3u8（hls）视频

woxingliu2018的博客

12-11

3315

①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项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载

wang_9909的博客

09-08

9748

uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载

uniapp npm引入Dplayer与hls解析播放m3u8格式视频

09-08

uniapp npm引入Dplayer与hls解析播放m3u8格式视频

uniapp使用海康h5player并接入hls、ws、rtsp视频流

q866725的博客

09-07

3169

script.src = 'static/lib/h5player.min.js' //h5player.min.js 相对路径。szBasePath: "static/lib", // 必填,引用H5player.min.js的js相对路径。szId: "play_window", //需要英文字母开头必填。3.html中编写dom元素时候需使用render.js传参方式将数据从逻辑层传到视图层。playURL: playUrl,//监控地址。采用uniap中的render.js 引入海康sdk。

关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题

weixin_43860852的博客

04-09

6693

关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题一、使用uniapp的原生video组件播放hls直播的问题二、尝试在app页面中使用webView，h5的video.js插件进行播放1.uniapp页面2.使用video.js播放直播的webview页面3.使用ckplayer播放器总结一、使用uniapp的原生video组件播放hls直播的问题使用uniapp自带的video组件倒是可以正常播放hls（m3u8后缀）格式的直播。倒是反馈不是很

m3u8视频本地单网页播放

06-21

适用于m3u8视频格式解析，本地单文件HTML，用文本工具修改Index.html 内的rul地址即可播放m3u8视频格式。

配置m3u8流媒体视频播放

06-05

配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放配置m3u8流媒体视频播放...

android webview m3u8,M3U8视频，在系统自带浏览器可以播放，但是在uni-app打开同样的网页就无法播放...

weixin_34467704的博客

05-26

2004

代码如下使用腾讯的TcPlayer的播放CCTV1的直播流1、用系统自带浏览器打开，正常播放；在uni-app使用webview打开页面，提示不支持播放此类型视频2、换成chimee也是一样的问题，在uni-app的webview中无法播放视频src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"char...

uniapp 打包微信小程序播放hls(m3u8)视频流

u010867236的专栏

03-13

886

博主近期做了可一个小程序对接监控视频的活，记录一下步骤。使用uniapp解析hls还是很方便的，使用内置的video标签就行，如果是动态的路径动态修改路径地址就行。同时这个标签也支持显示弹幕，有需要的童鞋了可以看一下uniapp官方文档和对应的小程序文档。

Uniapp H5 播放m3u8、flv格式视频

qq_27134147的博客

12-07

1452

简述一下业务需求，仅仅是需要在H5页面播放m3u8格式的视频，但是Uniapp官方提供的video组件在H5端不支持m3u8格式的视频播放，所以需要使用第三方库来播放，这里我使用的是MuiPlayer，但是貌似MuiPlayer的官方文档没有过多提及UniApp的用法，由于MuiPlayer默认支持mp4格式播放，所以我就自己扩展了m3u8格式和flv格式的播放。，所以这里记录一下使用方法，希望对大家有所帮助。提示一下：代码拉下来需要执行下面两条命令。

【uniapp】(使用webview)引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频

Minions_Fatman的博客

11-15

1631

【代码】【uniapp】引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频。

uni-app 播放m3u8格式视频

WYWEBGO的博客

05-25

1081

【代码】uni-app 播放m3u8格式视频。

uniapp播放m3u8格式视频

07-27

在 UniApp 中播放 m3u8 格式的视频，你可以使用 `uni-mpvue-video` 插件来实现。以下是具体的步骤： 1. 首先，确保你的 UniApp 项目中已经安装了 `uni-mpvue-video` 插件。你可以通过以下命令来安装： ``` npm install uni-mpvue-video ``` 2. 在需要使用视频播放功能的页面中引入 `uni-mpvue-video` 组件： ```vue <template> <view> <uni-mpvue-video :src="videoUrl" :autoplay="true" controls :muted="false" ></uni-mpvue-video> </view> </template> <script> export default { data() { return { videoUrl: 'http://example.com/path/to/video.m3u8' // 替换为你的 m3u8 视频链接 } } } </script> ``` 在上述代码中，`videoUrl` 是你要播放的 m3u8 格式视频的链接。 3. 运行你的 UniApp 项目，你应该能够在页面上看到播放器，并且开始自动播放指定的 m3u8 格式视频。注意：确保你的 m3u8 视频链接是有效的，并且可以在浏览器中正常播放。另外，由于不同设备和浏览器对视频格式的支持情况可能不同，播放器在某些设备或浏览器上可能无法播放 m3u8 格式的视频。在遇到兼容性问题时，你可以考虑使用其他格式的视频或使用相应的视频转码工具进行转换。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

uniapp播放 m3u8格式视频 兼容pc和移动端

支持全自动播放、设置参数

代码实现

1.安装dplayer组件

2. static/index.html下引入 hls

3. hsl.min.js

4.static/index.html下引入 video.min.js

“相关推荐”对你有帮助么？

uniapp播放 m3u8格式视频兼容pc和移动端