uniapp APP 接入萤石云

unipp App端接入萤石云采用webview方法，我之前看各路大佬说的把html文件放到static文件夹里面，正常运行html文件可以正常运行并播放监控画面，但是集成到app中发现监控页面不能够展示出来，后来解决办法是把html文件放到了服务器上，webview的链接是个线上链接。代码如下vue<template><view class="webview"><

EnjoyBeautifulLife

2966人浏览 · 2021-12-26 16:15:35

EnjoyBeautifulLife · 2021-12-26 16:15:35 发布

unipp App端接入萤石云

采用webview方法，我之前看各路大佬说的把html文件放到static文件夹里面，正常运行html文件可以正常运行并播放监控画面，但是集成到app中发现监控页面不能够展示出来，后来解决办法是把html文件放到了服务器上，webview的链接是个线上链接。

代码如下

vue

<template>
	<view class="webview">
		<web-view :src="url" id="webcon"/>
	</view>
	url = "http://xxx.html?url=" + this.videoUrl
	// videoUrl是监控的链接，html是线上地址

</template>

html

<script type="text/javascript" src="http://static.yfpyx.com/bigdata_app/js/ezuikit.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
  <video 
    id="myPlayer"
    autoplay
    src=""
    controls
    playsInline 
    webkit-playsinline
  >
  </video>
  <script>
	window.onload=()=>{
		// 截取url中传递过来的监控链接
		var str = decodeURIComponent(window.location.search.substr(5))
		// str = decodeURIComponent(str)
		setTimeout(() => {
			$('#myPlayer').attr("src", str);
			// 日志
			var player = new EZUIKit.EZUIPlayer('myPlayer');
			// 测试时打印log
			// player.on('log', log);
		}, 500)
		
		function log(str) {
			console.log(str)
			var div = document.createElement('DIV');
			
			div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
			document.body.appendChild(div);
		}
	}

  </script>
</body>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^