企业微信视频回放
This commit is contained in:
yanran200730
@@ -1,19 +1,67 @@
|
||||
<template>
|
||||
<div class="slw">
|
||||
<iframe v-if="isShow" :id="id" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?isMobile=1&url=${src}`"></iframe>
|
||||
<iframe v-if="isShow" :id="iframeId" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`"></iframe>
|
||||
<div class="slw-bottom" v-if="isShowBar">
|
||||
<Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" ref="timeline" :style="{width: width}"></Timeline>
|
||||
<div class="action-bar">
|
||||
<div class="left">
|
||||
<div class="left-btns">
|
||||
<img
|
||||
:src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'"
|
||||
@click="changePlayStatus">
|
||||
</div>
|
||||
<div
|
||||
class="volume"
|
||||
@mouseleave.stop="isShowVolume = false">
|
||||
<img
|
||||
@mouseenter.stop="isShowVolume = true"
|
||||
src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
|
||||
<div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="play-status">
|
||||
<div class="live" v-if="isLiveing">
|
||||
<span class="label"></span>
|
||||
<i>直播中</i>
|
||||
<em>{{ date }}</em>
|
||||
</div>
|
||||
<div v-else class="back-btn" @click="backLiveing">回到直播</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Timeline from './components/Timeline'
|
||||
export default {
|
||||
props: ['src'],
|
||||
props: ['id'],
|
||||
|
||||
name: 'slwVideo',
|
||||
|
||||
components: {
|
||||
Timeline
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
isShow: true,
|
||||
id: `video-${new Date().getTime()}`
|
||||
iframeId: `video-${new Date().getTime()}`,
|
||||
liveingUrl: '',
|
||||
replayUrl: '',
|
||||
times: [],
|
||||
isPause: false,
|
||||
isShowVolume: false,
|
||||
isShowBar: true,
|
||||
date: '',
|
||||
form: {
|
||||
date: ''
|
||||
},
|
||||
isLiveing: true
|
||||
}
|
||||
},
|
||||
|
||||
@@ -33,53 +81,302 @@
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
window.addEventListener('message', e => {
|
||||
if (e.data.type && e.data.name === 'fullscreen') {
|
||||
this.requestFullScreen(document.getElementById(this.id))
|
||||
computed: {
|
||||
src () {
|
||||
if (this.isLiveing) {
|
||||
return this.liveingUrl
|
||||
}
|
||||
|
||||
if (!e.data.type && e.data.name === 'fullscreen') {
|
||||
this.exitFullscreen()
|
||||
}
|
||||
}, false)
|
||||
return this.replayUrl
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.form.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
|
||||
this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
|
||||
this.getSlwPlaybackTime()
|
||||
this.width = document.querySelector(`.slw`).offsetWidth + 'px'
|
||||
|
||||
if (this.id) {
|
||||
this.getLiveingUrl()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
exitFullscreen () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen()
|
||||
}
|
||||
backLiveing () {
|
||||
this.getLiveingUrl()
|
||||
},
|
||||
|
||||
requestFullScreen (element) {
|
||||
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
|
||||
if (requestMethod) {
|
||||
requestMethod.call(element);
|
||||
} else if (typeof window.ActiveXObject !== 'undefined') {
|
||||
var wscript = new ActiveXObject('WScript.Shell')
|
||||
if (wscript !== null) {
|
||||
wscript.SendKeys('{F11}')
|
||||
onReplay (e) {
|
||||
this.isLoading = true
|
||||
this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
|
||||
params: {
|
||||
ids: this.id,
|
||||
startTime: `${this.form.date} ${e}`,
|
||||
endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
|
||||
nvrCodes: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.length) {
|
||||
this.replayUrl = res.data[0].playbackUrl
|
||||
this.isLiveing = false
|
||||
}
|
||||
this.isLoading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getLiveingUrl () {
|
||||
this.isLoading = true
|
||||
this.$http.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
|
||||
if (res.data) {
|
||||
this.liveingUrl = res.data
|
||||
this.isLiveing = true
|
||||
}
|
||||
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getSlwPlaybackTime () {
|
||||
this.isLoading = true
|
||||
this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
|
||||
params: {
|
||||
ids: this.id,
|
||||
startTime: this.date + ' 00:00:00',
|
||||
endTime: this.date + ' 23:59:59',
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.length) {
|
||||
const times = res.data[0].times
|
||||
|
||||
this.times = times.map(item => {
|
||||
const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
|
||||
const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
|
||||
|
||||
return {
|
||||
startTime: Number(startTime.toFixed(0)),
|
||||
endTime: Number(endTime.toFixed(0))
|
||||
}
|
||||
}).sort((a, b) => {
|
||||
return a.startTime - b.startTime
|
||||
})
|
||||
}
|
||||
|
||||
this.isLoading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
onVolume (e) {
|
||||
const v = (e / 100).toFixed(1)
|
||||
const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
|
||||
subPage.postMessage({
|
||||
type: 'volume',
|
||||
value: Number(v)
|
||||
}, '*')
|
||||
},
|
||||
|
||||
changePlayStatus () {
|
||||
const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
|
||||
subPage.postMessage({
|
||||
type: 'play',
|
||||
value: this.isPause
|
||||
}, '*')
|
||||
|
||||
this.isPause = !this.isPause
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slw {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.slw-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
transition: all ease-in-out 0.5s;
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.play-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
|
||||
em {
|
||||
margin-left: 12px;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: #343747;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.live {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 5px;
|
||||
color: rgba(0,255,0,.8);
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 12px;
|
||||
background: rgba(0,255,0,.8);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 50%;
|
||||
border: 4px solid rgba(0,255,0,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.volume-slider {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
padding: 20px 0 10px;
|
||||
background-color: rgba(0, 0,0,.8);
|
||||
transform: translate(-50%, 0);
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
background: #222838;
|
||||
color: #c9c9c9;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #c9c9c9;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
margin-right: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user