videoplayer.vue

<!-- 视频巡店 -->
<template>
	<div class="manage-container deviceStatus-wrapper">
		<el-row class="manage-head-wrapper" id="video-manage">
			<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-select>
				</div>
				<div class="manage-select-box">
					<el-select v-model="videoVal" filterable collapse-tags :placeholder="$t('pholder.select')" @change="videoChange">
						<el-option v-for="item in videoList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
				<div class="manage-select-box">
					<el-select v-model="type" :placeholder="$t('pholder.select')" @change="changeType">
						<el-option v-for="item in types" :key="item.key" :label="item.name" :value="item.key" />
					</el-select>
				</div>
				<div class="manage-select-box" v-show="type === 1">
					 <el-date-picker
						class="date-input" 
						style="width: 277px; height: 30px !important"
						v-model="dayTime" 
						type="datetimerange"
						value-format="yyyy-MM-dd HH:mm" 
						align="right"
						@change="changeVideo"
						:start-placeholder="$t('table.startTime')"
						:end-placeholder="$t('table.endTime')" />
				</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,

			type: 0,
			types: [
				{ name: '实时视频', key: 0 },
				{ name: '历史视频', key: 1 }
			],
			dayTime: []
		}
	},
	watch: {

	},
	components: {
	},
	created() {

	},
	mounted() {
		let date = new Date()
		let time = dateUnit.dateFormat(new Date(date.getTime() - 86400000), 'yyyy-MM-dd HH:mm');
		this.dayTime = [time, time]
		this.createPlayer();
	},
	destroyed() {
		this.player.stop()
	},
	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.type = 0;
			let date = new Date()
    		let time = dateUnit.dateFormat(new Date(date.getTime() - 86400000), 'yyyy-MM-dd HH:mm');
			this.dayTime = [time, time]
			this.getVideoList(this.mallValue)
		},

		getMallListForTerm() {
			this.mallListForTerm = [];
			this.mallValue = '';
			this.$api.base.mall({accountId: this.$cookie.get('accountId'), status_arr: '1,3'}, 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.videoChange()
			})
			.catch(err => {})
		},

		videoChange() {
			this.loading = true
			this.player.stop()
			this.$api.management.getVideo(this.videoVal).then(res => {
				if (res.data.data.ret === 0) {
					this.player.start(res.data.data.view_context)
				} else {
					this.$message({
						type: 'warning',
						message:res.msg,
						showClose: true,
					})
				}
				this.loading = false
			})
		},

		changeType() {
			if (this.type === 1) {
				this.changeVideo()
			} else {
				this.videoChange()
			}
		},

		changeVideo() {
			this.loading = true
			if (this.player) {
				this.player.stop()
			}
			this.$api.base.getSlVideo(this.videoVal, {
				startTime: this.dayTime[0],
				endTime: this.dayTime[1]
			}).then(res => {
				if (!res.data.success) {
					this.$message({
						type: 'warning',
						message: res.msg || res.data.msg,
						showClose: true,
					})
				} else if (res.data.data.ret === 0) {
					this.player.start(res.data.data.view_context)
				}
				this.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>