videoplayer.vue

<template>
	<div class="manage-container deviceStatus-wrapper">
		<el-row class="manage-head-wrapper">
			<el-col :span="24" :sm="24">
				<!-- 广场 -->
				<div class="manage-select-box">
					<el-select v-model="mallValue" filterable :placeholder="$t('pholder.shop')" @change="mallChange">
						<el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="manage-select-box">
					<el-select v-model="videoVal" filterable collapse-tags placeholder="请选择视频设备" @change="videoChange">
						<el-option v-for="item in videoList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</el-col>
		</el-row>
		<el-row class="manage-content">
			<div class="video-box" v-loading="loading">
				<canvas id="canvas" style="background: black;width:100%;height:100%"></canvas>
			</div>
		</el-row>
	</div>
</template>

<script>
import SLPlayer from '../../../../static/js/slplayer'
export default {
	data() {
		return {
			mallListForTerm: [],
			mallValue: '',
			videoList: [],
			videoVal: '',
			Module: {},
			player: '',
			liveUrl: '',
			tk: '',
			loading: true
		}
	},
	watch: {
	},
	components: {
	},
	created() {
		// this.getMallListForTerm();
	},
	mounted() {
		this.createPlayer();
	},
	methods: {
		i18n(value){
			let langaugeVal = 'pholder.' + value
			if(value == 'allFloor'){
				return this.$t(langaugeVal)
			}else{
				return value
			}
		},
		createPlayer() {
			let that = this;
			this.Module = {
				/* ************************************ */
				// 定义视频画布
				canvas: document.getElementById("canvas"),
				/* ************************************ */
				// 设置相应的事件回调
				onStart: function () {
					console.log("onStart...")
				},
				onEnd: function () {
					console.log("onEnd...")
				},
				onError: function (code, err) {
					// $('#preview').spin(false);
					alert('error: ', code, err)
					console.log('error: ', code, err);
				},
				onVideoStart: function () {
					// $('#preview').spin(false);
					// var ifr=$('#iframeId', parent.document);
					// ifr.height($('#canvas').height()+12)
					console.log('onVideoStart。。。');
				},
				// 录像回放中返回时间刻度
				onPlayTime: function (ts) {
					if(ts==0) return;
					var date = new Date(ts * 1000);//如果date为10位不需要乘1000
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					var timestamp = Y + M + D + h + m + s;
					// console.log(timestamp)
				}
			};
			SLPlayer(that.Module).then(function (obj) {
				that.player = obj;
				that.getMallListForTerm()
				console.log("实例成功")
      		 });
		},
		mallChange() {
			this.setSessionLocal('mallId', this.mallValue);
			this.getVideoList(this.mallValue)
		},
		getMallListForTerm() {
			this.mallListForTerm = [];
			this.mallValue = '';
			this.$api.base.mall({
				accountId: this.$cookie.get('accountId'),
				// status: 1,
				status_arr: '1,3'
				// _t: Date.parse(new Date()) / 1000
			},null,true)
				.then((data) => {
					let result = data.data;
					if (result.data.length) {
						if(this.getSessionLocal('mallId')) {
							this.mallValue = Number(this.getSessionLocal('mallId'));
						} else {
							this.mallValue = result.data[0].id;
							this.setSessionLocal('mallId', this.mallValue);
						}
						this.mallListForTerm = result.data;
						this.getVideoList(this.mallValue)
					}
				})
				.catch((error) => { })
		},
		getVideoList(mall_id) {
			this.videoVal = '';
			this.videoList = [];
			this.$api.base.video({
				mallId: mall_id,
			})
			.then(res => {
				let result = res.data;
				result.data.forEach((item,index) => {
					item.channels.forEach((child,key) => {
						if(index == 0 && key == 0) {
							this.videoVal = child.chan_id
						}
						let obj = {};
						obj.name = child.chan_name;
						obj.id = child.chan_id;
						this.videoList.push(obj)
					})
				})
				// this.loginVideo()
				this.login()
			})
			.catch(err => {})
		},
		videoChange(val) {
			this.getUrl()
		},
		loginVideo() {
			let params = {
				"user": "storeVideo",
				"password": "Vion2019",
				"force": 0,
				"login_mode": 0,
				"noAtoken":true
			};
			let config = {
					headers: {
						"Accept":"application/json",
						"Content-Type":"application/json"
    				}
			}
			this.$api.login.loginVideo(params,config,true)
			.then(res => {
				if (res.ret == 0) {
					this.tk = res.tk
					this.getVideoUrl(this.tk)
				} else{
					alert(res.msg)
				}
			})
		},
		getVideoUrl() {
			let params = {
				"chan_serial":  this.videoVal        // 获取预览的url接口，只需要通道id一个参数
			};
			this.$api.login.videoUrl(this.tk,params)
			.then(res => {
				if (res.ret == 0) {
					this.liveUrl = res.view_context.replace("ws://","wss://").replace(':39401',':18443')
					this.liveUrl = this.liveUrl.replace("127.0.0.1", "video.keliuyun.com")
					this.player.start(this.liveUrl)
				} else{
					console.log(res.msg)
				}
			})
		},
		ajaxPost(url, data, fn) {
			$.ajax({
				method:"POST",
				url:url,
				async:false,
				headers: {
	            //  "Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",
					"Accept":"application/json",
					"Content-Type":"application/json"
				},
				data:JSON.stringify(data),

				traditional: true,

				success: fn,

				error: function() {
					console.log("服务器或网络错误：", url);
				}
			});
		},
		login(){
			let params = {
				"user": "storeVideo",
				"password": "Vion2019",
				"force": 0,
				"login_mode": 0
			};
			let that = this;
			// ajax post方式发送请求
			this.ajaxPost(window._vionConfig.videoUrl + "/webapi/login",params,function(res){
				if (res.ret == 0) {
					that.tk = res.tk
					that.getUrl()
				} else{
					that.$message({
						type: 'warning',
						message:res.msg,
						showClose: true,
					})
				}
				that.loading = false
			});
		},
		getUrl(){
			this.loading = true
			let params = {
				"chan_serial":  this.videoVal        // 获取预览的url接口，只需要通道id一个参数
			};
			let that = this;
			// ajax post方式发送请求
			this.ajaxPost(window._vionConfig.videoUrl + "/webapi/v4/preview/view?tk="+this.tk,params,function(res){
				if (res.ret == 0) {
					that.liveUrl = res.view_context.replace("ws://","wss://").replace(":39401",":18443")
					that.liveUrl = that.liveUrl.replace("127.0.0.1", "video.keliuyun.com")
					that.player.start(that.liveUrl)
				} else{
					that.$message({
						type: 'warning',
						message:res.msg,
						showClose: true,
					})
				}
				that.loading = false
			});
		},
	}
}
</script>

<style scoped>
.manage-select-box .el-select {
    width: 200px;
}

.btn-box:after,
.btn-box:before {
	content: '';
	display: table;
}

.btn-box:after {
	clear: both;
}

.fl-btn+.fl-btn {
	margin-right: 20px;
}
.video-box {
	width: 100%;
	height: 750px;
}
@media (max-height: 900px) {
	.video-box {
		width: 100%;
		height: 650px;
	}
}
@media (max-height: 720px) {
	.video-box {
		width: 100%;
		height: 520px;
	}
}
</style>