<template>
|
<div class="box">
|
<div class="header">
|
<div class="title1">视频播放区</div>
|
</div>
|
<div class="content">
|
<div class="videoContent">
|
<Video id="v_video"
|
style="height: 100%; width: 100%; object-fit: fill;"
|
autoplay="autoplay"
|
preload="auto"
|
controls="controls"
|
muted="muted"></Video>
|
</div>
|
<div>
|
<div class="subtract"></div>
|
<div class="positionContent">{{ this.$store.state.videoName }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { channelIdList } from '../../../utils/api.js'
|
//
|
export default {
|
// import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
// 这里存放数据
|
return {
|
falg: 0,
|
timer: null,
|
lastId: null,
|
flvPlayer: null,
|
featureLayer: null
|
}
|
},
|
// 方法集合
|
methods: {
|
// 停止
|
stop () {
|
this.$store.state.showVideoFlag = false
|
//this.resetImg()
|
//this.clsTimer()
|
this.clsPlayer()
|
},
|
// 播放 *
|
start (index) {
|
if (!flvjs.isSupported()) {
|
alert('当前浏览器不支持flvjs播放Flv视频！')
|
return
|
}
|
|
var that = this, i = index
|
var count = this.$store.state.data.length
|
this.stop()
|
this.playByIndex(i)
|
|
this.timer = setInterval(function () {
|
if (++i >= count) i = 0
|
|
that.resetImg()
|
that.clsPlayer()
|
that.playByIndex(i)
|
}, PLAY_TIMER)
|
},
|
// 重置图片
|
resetImg: function () {
|
if (this.lastId != null) {
|
this.$store.commit('changeImg', { idx: this.lastId, flag: false })
|
this.lastId = null
|
}
|
},
|
// 清除定时器 *
|
clsTimer () {
|
if (this.timer != null) {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
},
|
// 清除播放器
|
clsPlayer () {
|
if (this.flvPlayer != null) {
|
this.flvPlayer.destroy()
|
this.flvPlayer = null
|
}
|
},
|
// 根据索引播放 *
|
async playByIndex (i) {
|
if (i == null || i < 0 || i > this.$store.state.data.length) return
|
|
console.log('i => ', i)
|
this.lastId = i
|
var data = this.$store.state.data[i]
|
this.$store.commit('changeImg', { idx: i, flag: true })
|
// if (this.$store.state.videoName != '荣华路') {
|
// this.flyTo(data)
|
// } else {
|
// }
|
var rs = await channelIdList(data.channelId)
|
if (!rs || rs.status != 200 || !rs.data.data.length) return
|
this.play(rs.data.data[0])
|
},
|
// 播放视频
|
play (d) {
|
var url = this.getVideoUrl(d)
|
console.log('play.videoUrl =>', url)
|
var videoElement = document.getElementById('v_video')
|
this.flvPlayer = flvjs.createPlayer({
|
type: 'flv',
|
url: url
|
})
|
this.flvPlayer.attachMediaElement(videoElement)
|
this.flvPlayer.load()
|
this.flvPlayer.play()
|
},
|
// 获取视频Url
|
getVideoUrl (d) {
|
if (IS_TEST) return XI_GA_FLV;
|
|
return (
|
//(location.href.indexOf(API_HOST) > -1 ? '' : `http://${d.streamServerIp}:${d.streamServerPort}`) +
|
(location.href.indexOf(API_HOST) > -1 ? '' : VIDEO_HOST) +
|
`/play.flv?${d.accessWay}:${d.user}:${d.password}@${d.deviceIp}:${d.devicePort}:${d.channelNum}:1`
|
) // ${d.streamNum}
|
},
|
// 飞向 *
|
flyTo (data) {
|
var x = parseFloat(data.longitude)
|
var y = parseFloat(data.latitude)
|
if (x == 0 || y == 0) return
|
|
var p = this.$store.state.transform(x, y)
|
map.flyTo(p.x, p.y, 500, 0, -6, 0, 20000, null, 6) // -42, -27
|
},
|
// 开始漫游
|
startManYou () {
|
if (this.$store.state.videoId == null) return;
|
var resid = this.$store.state.videoId;
|
|
var data = this.$store.state.data;
|
var pointer = this.getVideoPoint(data);
|
var wander = this.getroamheight(resid);
|
|
let params = {
|
id: resid, //漫游线路的ID，现在只有1
|
data: pointer, //点位和点位ID
|
Rate: 1, //漫游速度，1是正常速度，全程60秒
|
StopTime: STOP_TIME, //每个点位停止时间
|
Range: wander.d, //距离点位多少停止漫游，单位厘米
|
time: 2, //切换时间
|
CameraHeight: wander.h, //漫游相机高度
|
pitch: -6 //-60 //相机俯仰角
|
}
|
|
var that = this;
|
map.execute('grapi', 'TurnOnLineRoaming', params, function (e) {
|
console.log("TurnOnLineRoaming.id =>", e, e.args.id);
|
if (e && e.args && e.args.id) {
|
that.showVideo(e.args.id);
|
that.changeImage(e.args.id);
|
}
|
});
|
},
|
// 获取漫游高度
|
getroamheight (val) {
|
switch (val) {
|
case 1://'荣华路'
|
return { h: 3000, d: 30000 }
|
case 2:// '荣京东街'
|
return { h: 2000, d: 30000 }
|
case 3://'大族广场'
|
return { h: 1000, d: 30000 }
|
case 4://'博大公园'
|
return { h: 1500, d: 25000 }
|
case 5://'区域全景'
|
return { h: 1000, d: 25000 }
|
case 6://'高点摄像头'
|
return { h: 3000, d: 30000 }
|
}
|
},
|
// 切换图片
|
changeImage (id) {
|
var data = this.$store.state.data
|
for (var i in data) {
|
if (data[i].channelId == id) {
|
this.$store.commit('changeVideo', i);
|
break;
|
}
|
}
|
},
|
// 展示视频
|
async showVideo (id) {
|
this.clsPlayer();
|
var rs = await channelIdList(id);
|
console.log("showVideo =>", id, rs);
|
if (!rs || rs.status != 200 || !rs.data.data.length) return;
|
|
this.play(rs.data.data[0]);
|
},
|
// 获取视频点
|
getVideoPoint (res) {
|
var points = [];
|
for (let i = 0; i < res.length; i++) {
|
var p = this.$store.state.transform(res[i].longitude, res[i].latitude);
|
points.push({
|
Location: new TUVector3(p.x, p.y, 100),
|
PointID: res[i].channelId
|
});
|
}
|
return points;
|
}
|
},
|
created () {
|
this.$bus.$on('stopPlay', () => {
|
this.stop()
|
})
|
this.$bus.$on('playVideo', (index) => {
|
this.clsPlayer();
|
this.startManYou();
|
})
|
this.$bus.$on('manYouVideo', (e) => {
|
if (e && e.JsonNews && e.JsonNews.channelId) {
|
console.log("manYouVideo.id =>", e.JsonNews.channelId);
|
this.clsPlayer();
|
this.showVideo(id);
|
}
|
})
|
this.$bus.$on('manPoiVideo', (e) => {
|
if (e && e.channelId) {
|
console.log("manPoiVideo.id =>", e.channelId);
|
this.clsPlayer();
|
this.showVideo(e.channelId);
|
}
|
})
|
},
|
mounted () {
|
this.showVideo(VIDEO_ID);
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
|
font-style: normal;
|
font-weight: 500;
|
|
.header {
|
width: 100%;
|
height: 75px;
|
background: url('../../../assets/img/FoucesVideoHeader.png') no-repeat
|
center;
|
background-size: 100% 100%;
|
position: absolute;
|
|
.title1 {
|
line-height: 75px;
|
margin-left: 23.57px;
|
position: absolute;
|
float: left;
|
font-size: 32px;
|
color: white;
|
font-family: SourceHanSansCN;
|
}
|
}
|
.content {
|
width: 100%;
|
height: 612px;
|
background: url('../../../assets/img/Rectangle 894.png') no-repeat center;
|
background-size: 100% 100%;
|
|
position: absolute;
|
.videoContent {
|
width: 100%;
|
height: 460px;
|
top: 75px;
|
position: absolute;
|
}
|
.subtract {
|
width: 31.11px;
|
height: 37.78px;
|
background: url('../../../assets/img/Subtract.png') no-repeat center;
|
background-size: 100% 100%;
|
left: 32px;
|
bottom: 22px;
|
position: absolute;
|
}
|
.positionContent {
|
font-size: 32px;
|
color: white;
|
color: white;
|
left: 72px;
|
bottom: 22px;
|
position: absolute;
|
font-family: SourceHanSansCNRegular;
|
}
|
}
|
}
|
</style>
|
