问题
使用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页面,除了限制多一点,实现一般需求都比较轻松。