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

直接使用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()

欢迎评论讨论

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Uniapp项目中引入dplayer.js和hls.js可以实现解析和播放m3u8直播流视频文件,具体步骤如下: 1. 首先,将dplayer.js和hls.js的相关文件引入到Uniapp项目中。可以通过npm安装这些库文件,也可以将它们下载到本地然后引入。 2. 在需要使用dplayer的页面中,使用uni.require将dplayer.js引入进来。例如,可以在页面的script标签中使用以下代码: ```javascript import DPlayer from '@/path/to/dplayer.js'; ``` 注意,@/path/to/指的是dplayer.js文件所在的路径。 3. 在页面中创建一个容器元素,用于渲染播放器。可以在template标签中添加一个div元素,例如: ```html <template> <div id="dplayer-container"></div> </template> ``` 这里给div元素设置一个id,以便之后使用。 4. 在页面的mounted钩子函数中,创建并初始化DPlayer实例。可以在mounted函数中添加以下代码: ```javascript mounted() { const container = document.getElementById('dplayer-container'); const options = { // 设置DPlayer的配置选项 }; const player = new DPlayer(options); player.init(); // 其他相关配置和操作 }, ``` 这里需要根据具体项目的需求,设置DPlayer的相关配置选项,比如视频的url、控制栏样式等。可以参考DPlayer的官方文档进行设置。 5. 使用hls.js解析m3u8直播流视频文件。在设置DPlayer的配置选项时,可以通过设置type为'hls'来启用hls.js的解析功能。例如: ```javascript const options = { // 其他配置选项 type: 'hls', url: 'http://example.com/video.m3u8', }; ``` 这里的url需要替换为实际的m3u8直播流视频文件的地址。 通过以上步骤,在Uniapp项目中成功引入dplayer.js和hls.js,并使用DPlayer来解析和播放m3u8直播流视频文件。修改相应的配置选项,可以根据需求进行定制化操作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值