2 changed files with 131 additions and 212 deletions
@ -1,56 +1,104 @@ |
|||||
|
|
||||
<template> |
<template> |
||||
<div class="p-6 w-96 h-80"> |
<div> |
||||
<iframe |
<el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" top="100px" width="1020px" :before-close="handleClose" |
||||
ref="myIframe" |
class="darkDialog" :modal="false" :append-to-body="true"> |
||||
@load="sendMessageToIframe" |
<!-- <div slot="title" |
||||
class="w-[60vw] h-[60vh]" |
class="dialogTitle"> |
||||
:src="videoSrc" |
<div alt="" |
||||
frameborder="0" |
class="title_img"></div> |
||||
></iframe> |
{{ data.name }} |
||||
</div> |
</div> --> |
||||
</template> |
<div class="dialogBody" > |
||||
<script> |
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" |
||||
export default { |
:options="playerOptions"> |
||||
data() { |
</video-player> |
||||
|
</div> |
||||
|
<!-- <div slot="footer" class="dialogFooter"> |
||||
|
{{dataV.deviceName}} |
||||
|
<div> |
||||
|
<img src="../../../../assets//img/arrow-down.png" alt=""> |
||||
|
<span>{{dataV.deviceAddress}}</span> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost,requestGet } from "@/js/dai/request"; |
||||
|
export default { |
||||
|
data() { |
||||
return { |
return { |
||||
token: "", |
dialogVisible: false, |
||||
videoSrc:"", |
playerOptions: { |
||||
userData:{ |
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度 |
||||
"userName": "apizhsq", |
autoplay: true, //如果true,浏览器准备好时开始回放。 |
||||
"password": "12345678@df", |
muted: false, // 默认情况下将会消除任何音频。 |
||||
"type": 1 |
loop: true, // 视频一结束就重新开始。 |
||||
} |
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
||||
|
language: 'zh-CN', |
||||
|
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
||||
|
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 |
||||
|
sources: [{ type: '', src: ''}], |
||||
|
poster: '', //你的封面地址 |
||||
|
// width: document.documentElement.clientWidth, |
||||
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
||||
|
controlBar: { |
||||
|
timeDivider: true, //当前时间和持续时间的分隔符 |
||||
|
durationDisplay: true, //显示持续时间 |
||||
|
remainingTimeDisplay: false, //是否显示剩余时间功能 |
||||
|
fullscreenToggle: true //全屏按钮 |
||||
|
} |
||||
|
} |
||||
}; |
}; |
||||
}, |
}, |
||||
methods: { |
props: { |
||||
sendMessageToIframe() { |
dataV: { |
||||
const message = { |
type: Object, |
||||
token: this.token, |
default: () => {} |
||||
}; |
} |
||||
const iframe = this.$refs.myIframe; |
}, |
||||
iframe.contentWindow.postMessage(message, "*"); |
created() { |
||||
}, |
// debugger |
||||
getAuthCameras(token){ |
// this.playerOptions.sources[0].src = this.data.src; |
||||
var that=this; |
}, |
||||
this.$http.post("http://172.20.41.195:9006/video/api/getAuthCameras",null,{ |
components: {}, |
||||
headers: { |
methods: { |
||||
Authorization: token |
handleClose(done) { |
||||
}}) |
// done(); |
||||
.then((res) => { |
this.$emit('close'); |
||||
that.videoSrc="http://172.20.41.195:9015/video-play-plug?token="+that.token+"&playType=realPlay"+"&cameraCode="+res.data.data[0].code |
this.dialogVisible = false |
||||
}); |
|
||||
}, |
}, |
||||
getLogin(){ |
async videoLogin(){ |
||||
this.$http |
console.log(this.dataV); |
||||
.post("http://172.20.41.195:9006/video/api/login",this.userData) |
let url = "/auth/thirdlogin/video/login" |
||||
.then((res) => { |
let {data,code,msg} = await requestPost(url) |
||||
this.token=res.data.data.token; |
if(code == 0 ){ |
||||
this.getAuthCameras(res.data.data.token); |
this.playerOptions.sources[0].src = "http://172.20.41.195:9015/video-play-plug?token="+data.token+"&playType=realPlay"+"&cameraCode="+this.dataV.code |
||||
}); |
} |
||||
} |
} |
||||
}, |
} |
||||
mounted(){ |
}; |
||||
this.getLogin(); |
</script> |
||||
}, |
|
||||
}; |
<style lang="scss" scoped> |
||||
</script> |
::v-deep .el-dialog { |
||||
|
background-color: #000; |
||||
|
|
||||
|
.el-dialog__header { |
||||
|
position: relative; |
||||
|
top: -6px; |
||||
|
} |
||||
|
|
||||
|
.el-dialog__body { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.el-dialog__footer { |
||||
|
background-color: #fff; |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<!-- <style lang="scss" src="@/assets/scss/test.scss" scoped></style> --> |
||||
|
|||||
Loading…
Reference in new issue