当前位置: 首页 > 工具软件 > Banner.js > 使用案例 >

uniapp app端播放实时监控视频 使用DPlayer.js flv.js

孔俊捷
2023-12-01

直接使用flv.js会在app真机运行时报错,编译不过去,也试了还几种方案 这个实现了 使用web-view跳转html页面 html页面放在static文件夹下

<view class="contents">
		<web-view id="iframeVideo" :src="`/static/html/videoPlay.html?vehicleId=${vehicleId}&token=${token}`">
		</web-view>
	</view>

htnl页面 head中引入js文件

<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script src="./video/flv.js"></script>
<script src="./video/DPlayer.min.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="./webview.js"></script>

使用id容器

<div  id='mapPage'></div>

视频播放

this.dplayer = new DPlayer({
	container: document.getElementById('mapPage'),
	video: {
			url:this.url, //视频路径
			autoplay: true,
			// pic: 'images/banner1.png', //视频封面
		    // thumbnails: 'images/banner2.png', //视频缩略图
			type: 'flv' // 很重要
		},
	});

销毁视频

this.dplayer.destroy()

欢迎评论讨论

 类似资料: