uniapp app端视频流
时间: 2023-12-09 07:04:23 浏览: 394
uniapp app端视频流可以通过使用web-view跳转html页面来实现。具体步骤如下:
1.在static文件夹下创建一个html页面,用于播放视频流。
2.在uniapp的页面中使用web-view标签,并将src属性设置为刚才创建的html页面的路径,同时传递视频流的相关参数。
3.在html页面中使用第三方的视频播放库,例如DPlayer,来播放视频流。
下面是一个示例代码:
```html
<!-- uniapp页面 -->
<template>
<view class="contents">
<web-view id="iframeVideo" :src="`/static/html/videoPlay.html?vehicleId=${vehicleId}&token=${token}`"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
vehicleId: '123', // 视频流相关参数
token: 'abc'
}
}
}
</script>
<!-- html页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Play</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
</head>
<body>
<div id="mapPage"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const vehicleId = urlParams.get('vehicleId');
const token = urlParams.get('token');
const dplayer = new DPlayer({
container: document.getElementById('mapPage'),
video: {
url: `http://example.com/live/${vehicleId}.flv?token=${token}`,
autoplay: true,
type: 'flv'
}
});
</script>
</body>
</html>
```
阅读全文
相关推荐

















