uniapp+app开发使用muiplayer播放m3u8视频流的不成熟方法

问题

使用uniapp开发手机端app,有一个页面是一个m3u8格式的视频列表,如果使用原版的video标签播放会因为层级最高问题不能滑动被覆盖。

方案

使用iframe内嵌本地页面(为什么不用webview?webview在模拟器可以显示在真机上就显示不出来,同时手机端的webview的层级是最高的)。

代码

<uv-list style="height: calc(100vh - 88rpx);width: 100%;overflow: auto;padding:24rpx 20rpx;"> <template v-for="item in msgArr"> <uv-list-item style="width: 710rpx;"> <view w-full bg="#FFFFFF" border-rd-20rpx overflow-hidden> <view w-full h-464rpx bg="blue" relative> <iframe :src="`./static/muiPlayer/index.html?title=${encodeURIComponent(item.name)}&url=${encodeURIComponent(item.playUrl)}`" style="width: 100%;height:100%" border="0" allow="fullscreen"></iframe> </view> <view h-70rpx text="#3D3D3D 14px" pl-30rpx font-700 font-pf--regular flex items-center> {{ item.name }} </view> </view> </uv-list-item> </template> </uv-list>

index.html文件代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!-- 引入基础样式文件 mui-player.min.css --> <link rel="stylesheet" type="text/css" href="./mui-player.min.css" /> <!-- 引入基础脚本 mui-player.min.js --> <script type="text/javascript" src="./hls.js"></script> <!-- 拓展播放m3u8视频流 --> <script type="text/javascript" src="./mui-player.min.js"></script> </head> <style type="text/css"> html, body { margin: 0; width: 100%; height: 100%; } </style> <body> <!-- 指定Mplayer容器,并且绑定属性id初始化是使用 --> <div id="mui-player"> </div> </body> <script type="text/javascript"> const pattern = /\?title=(.*?)&url=(.*)/; const result = window.location.href.match(pattern); const title = decodeURIComponent(result[1]); const url = decodeURIComponent(result[2]); // 初始化 MuiPlayer 插件,MuiPlayer 方法传递一个对象,该对象包括所有插件的配置 var mp = new MuiPlayer({ container: '#mui-player', autoplay: false, height: '100%', width: '100%', initFullFixed: false, title: title, autoFit: false, preload: 'metadata', objectFit: 'contain', autoOrientaion: true, // live: true, src: url, parse: { type: 'hls', loader: Hls, config: { // hls config to:https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning debug: false, }, }, pageHead: false, showMiniProgress: false }) </script> </html>

文件放置路径:

// 文件放置路径 |-- root 根目录 |-- src | |-- static | | |-- muiPlayer | | | |-- hls.js // 视频流插件 | | | |-- index.html // 嵌入的静态页面 | | | |-- mui-player.min.css // muiplayer插件 css文件 | | | |-- mui-player.min.js // muiplayer插件 js文件

最后

可能存在的问题:每一个item都是一个嵌套的iframe,做成列表的话可能会导致性能上的问题。
同时iframe内嵌视频的话,视频全屏和视频全屏情况下的自定义按钮可能比较麻烦实现。
所以后续的想法是重写为nvue页面,除了限制多一点,实现一般需求都比较轻松。

相关文档


__EOF__

本文作者damarkday知识库
本文链接https://www.cnblogs.com/GoodMemoryBlog/p/17705587.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   DAmarkday  阅读(1661)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示