知識儲備

1. uni-app web-view組件相關(guān)知識：點擊學(xué)習(xí)。
2. 海康威視相關(guān)工具下載：點擊跳轉(zhuǎn)下載。
3. web-view組件不全屏顯示：uni-app web-view 如果設(shè)置不全屏 不自動鋪滿。

工具下載

首先下載?？低昲5player的demo

在uni-app項目中static文件夾下創(chuàng)建文件目錄，我命名為h5player

將demo中bin文件夾下的文件原封不動復(fù)制到h5player文件夾中，txt文件可以刪除

h5player根目錄下新建webplayer.html文件

引入h5player.min.js

<script src="./h5player.min.js"></script>

webplayer.html

在webplayer.html文件中，新增樣式，寬高根據(jù)自己的需求調(diào)整

<style type="text/css">
	html,
	body {
		/* width: 100%; */
		/* height: 100%; */
		margin: auto;
		overflow: hidden;
		background-color: #000;
		-webkit-user-select: none;
		user-select: none;
	}
	.myplayer {
		width: 100%;
		height: 2.21rem;
	}
</style>

在頁面創(chuàng)建dom元素

<div id="play_window" class="myplayer"></div>

獲取url中參數(shù)的方法

//取url中的參數(shù)值
function GetQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]);
	return null;
}

初始化插件

// 初始化插件
var myPlugin = new JSPlugin({
	szId: 'play_window', //需要英文字母開頭 必填
	szBasePath: './', // 必填,引用H5player.min.js的js相對路徑
})

獲取視頻播放流以后，開始播放，播放成功后抓圖本地存儲

// 獲取視頻播放流
var playURL = GetQueryString("cameraUrl")
// 有視頻流地址以后，才進(jìn)行播放
if(playURL){
	// 窗口下標(biāo)
	var curIndex = 0;
	// 獲取監(jiān)控點唯一標(biāo)識，方便作為抓圖存儲的key
	var cameraIndexCode = GetQueryString("cameraIndexCode")
	// 視頻預(yù)覽
	myPlugin.JS_Play(playURL, {
		playURL,
		mode: 1
	}, curIndex).then(() => {
		console.info('JS_Play success 播放成功');
		// do you want...
		// 抓圖
		var fileName = 'img';
		var fileType = 'JPEG';
		//不進(jìn)行下載，數(shù)據(jù)回調(diào)
		myPlugin.JS_CapturePicture(curIndex, fileName, fileType,imageData => {
			console.info('JS_CapturePicture success 抓圖成功'); //2.1.0開始全是base64，之前的版本存在blob或者是base64
			// do you want...
			plus.storage.setItem(cameraIndexCode,imageData);
		})
	}, (err) => {
		console.info('JS_Play failed:', err);
		// do you want...
	});
}

h5player.vue

在uni-app應(yīng)用內(nèi)，pages頁面中需要用到視頻播放的頁面，創(chuàng)建web-view組件

web-view組件的src需要動態(tài)改變，所以存儲在data數(shù)據(jù)里

因為web-view組件默認(rèn)就是占據(jù)整個視口的高寬，所以我們需要設(shè)置web-view的寬高，調(diào)整位置

// 設(shè)置web-view的寬高，調(diào)整位置
setHeight(){
	var height = 350; //定義動態(tài)的高度變量，如高度為定值，可以直接寫
	var currentWebview = this.$scope.$getAppWebview(); //獲取當(dāng)前web-view
	setTimeout(function() {
		var wv = currentWebview.children()[0];
		wv.setStyle({ //設(shè)置web-view距離頂部的距離以及自己的高度，單位為px
			top:300 , //此處是距離頂部的高度，應(yīng)該是你頁面的頭部
			height:  height , //webview的高度
			scalable: false, //webview的頁面是否可以縮放，雙指放大縮小,
		})
	}, 500); //如頁面初始化調(diào)用需要寫延遲
},

獲取視頻流地址，在 web-view 中只需要通過 URL 就可以向 H5 進(jìn)行傳參，通過url將數(shù)據(jù)傳入webplayer.html就可以播放監(jiān)控視頻了

// 獲取視頻流
previewURLs(){
	this.$api.previewURLs(this.cameraIndexCode,res=>{
		this.cameraUrl = res.data.url;
		console.log("previewURLs",this.cameraUrl);
		this.webURL="../../../static/h5player/webplayer.html?cameraIndexCode="+this.cameraIndexCode+"&cameraUrl="+this.cameraUrl
	});
},

這就是在uni-app應(yīng)用內(nèi)嵌入h5頁面，如果我們還要在uni-app應(yīng)用頁面中，添加其他組件模塊，記得避開h5頁面，web-view組件的層級是最高的。

視頻時效

獲取的視頻播放地址如果是有時效的，還要開啟一個定時器，定時刷新獲取url

// 視頻流地址失效后，重新刷新獲取地址
onReady() {
	// 定時獲取視頻播放流
	this.timer = setInterval(() => {
		this.previewURLs();
	}, 100000)
},
onHide() {
	// 關(guān)閉負(fù)荷趨勢定時器
	if(this.timer) {  
		clearInterval(this.timer);  
		this.timer = null;  
	}  
},

這種處理方式不太合適，可以配置為沒有時效的鏈接

傳遞參數(shù)為中文

傳入web-view的數(shù)據(jù)如果是中文，需要進(jìn)行編碼然后傳入，否則會出現(xiàn)亂碼

//這里對要傳入到webview中的參數(shù)進(jìn)行encodeURIComponent編碼否則中文亂碼
this.url+=encodeURIComponent(data.data)

webview 返回上一頁

webview 返回上一頁的時候，改變傳入的參數(shù)就要重新打開一個頁面，返回的時候就要多次返回?？梢韵汝P(guān)閉webview然后跳轉(zhuǎn)頁面，具體參考：https://blog.csdn.net/z14322/article/details/125702942。

在H5環(huán)境中使用window.postMessage通信，webview向uni-app應(yīng)用發(fā)送消息

應(yīng)用端uni-app代碼：

onLoad: function() {
	window.addEventListener('message', function(e) { // 監(jiān)聽 message 事件
		console.log(e.origin);
		console.log("從" + e.origin + "收到消息： " + e.data);
	});
}

網(wǎng)頁webview代碼：

//向uniapp發(fā)送信息
function sendMsgToUniapp(value) {
	parent.postMessage(value, "*");
}

更多內(nèi)容可以參考：https://blog.csdn.net/liu2004051957/article/details/126886897。

uni-app中不使用webview、直接在.vue中播放視頻

createPlayerIns() {
	this.playerIns = new window.JSPlugin({
		szId: 'play_window', //需要英文字母開頭 必填
		szBasePath: '/static/h5player/',
		iMaxSplit: 1,
		iCurrentSplit: 1,
		bSupporDoubleClickFull:false,
		openDebug:true,
		oStyle: {
			border: "#f00",
			borderSelect: "#FFCC00",
			background: "#000"
		}
	})
},
playVideo() {
	let playURL = this.cameraUrl;
	alert(playURL)
	this.playerIns.JS_Play(playURL, {
		playURL,
		mode: 1
	}, 0).then(() => {
		alert("成功播放視頻")
	}, (err) => {
		alert('視頻播放失?。? + playURL + JSON.stringify(err));
	});
},

新增的文件仍然放在static中

在index.html中引入h5player.min.js
文章來源地址http://www.zghlxwxcb.cn/news/detail-781839.html

到了這里，關(guān)于uni-app引入?？低昲5player實現(xiàn)視頻監(jiān)控的播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！