问题

使用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文件