uni-app 将img图片转换为video视频

<!--原-->
<img src="src" alt="视频">

<!--现-->
<video src="src" style="width:100%"></video>

<!--转换为视频后加入属性会预览视频图-->
<video :src="src" style="width:100%" controls :poster="src +'?x-oss-process=video/snapshot,t_0,f_jpg'"></video>

 

//调用
txtc(图片的html)

txtc(row){
	var arr = row.split('" alt="视频">');
	for(var i = 0;i<arr.length;i++){
		var txt = arr[i].split('src="');
		var srcs = txt[txt.length-1];
		var xcv = '<video src="'+srcs+'" style="width:100%" controls poster="'+srcs +'?x-oss-process=video/snapshot,t_0,f_jpg"></video>';
		
		var row = row.replace('<img src="'+srcs+'" alt="视频">',xcv);
	}
	return row;
},

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uni-app中,可以使用uni-WebRTC插件来实现将RTSP视频转换成WebRTC视频流的功能。具体实现步骤如下: 1. 安装uni-WebRTC插件,可以在uni-app的插件市场中搜索并安装。 2. 在页面中创建一个canvas元素,用于显示视频。 3. 使用uni-WebRTC插件的`createContext`方法创建一个WebRTC上下文对象。 4. 使用WebRTC上下文对象的`createPlayer`方法创建一个RTSP视频播放器对象,并使用`start`方法开始播放视频。 5. 将播放器对象的视频流绘制到canvas元素上,可以使用`drawImage`方法实现。 6. 使用WebRTC上下文对象的`createLivePusher`方法创建一个WebRTC推流器对象,并使用`start`方法将视频流推送到服务器。 具体实现代码示例如下: ``` <template> <canvas id="canvas" style="width:100%;height:100%;"></canvas> </template> <script> import uniWebRTC from '@/uni_modules/uni-webrtc/js_sdk/uni-webrtc.js'; export default { onLoad() { const canvas = this.$refs.canvas; const context = uniWebRTC.createContext(canvas); const player = context.createPlayer({ url: 'rtsp://xxx.xxx.xxx.xxx:554/live', type: 'rtsp' }); player.start(); setInterval(() => { context.drawImage(player, 0, 0, canvas.width, canvas.height); context.flush(); }, 100); const livePusher = context.createLivePusher({ url: 'webrtc://xxx.xxx.xxx.xxx:1935/live', width: canvas.width, height: canvas.height }); livePusher.start(); } } </script> ``` 需要注意的是,WebRTC技术需要在服务器端进行支持,因此需要在服务器端安装WebRTC相关组件。同时,由于WebRTC技术还在不断发展中,不同浏览器和设备之间的兼容性问题需要进行充分的测试。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值