2 changed files with 131 additions and 212 deletions
@ -1,56 +1,104 @@ |
|||
|
|||
<template> |
|||
<div class="p-6 w-96 h-80"> |
|||
<iframe |
|||
ref="myIframe" |
|||
@load="sendMessageToIframe" |
|||
class="w-[60vw] h-[60vh]" |
|||
:src="videoSrc" |
|||
frameborder="0" |
|||
></iframe> |
|||
<div> |
|||
<el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" top="100px" width="1020px" :before-close="handleClose" |
|||
class="darkDialog" :modal="false" :append-to-body="true"> |
|||
<!-- <div slot="title" |
|||
class="dialogTitle"> |
|||
<div alt="" |
|||
class="title_img"></div> |
|||
{{ data.name }} |
|||
</div> --> |
|||
<div class="dialogBody" > |
|||
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" |
|||
:options="playerOptions"> |
|||
</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 { |
|||
token: "", |
|||
videoSrc:"", |
|||
userData:{ |
|||
"userName": "apizhsq", |
|||
"password": "12345678@df", |
|||
"type": 1 |
|||
dialogVisible: false, |
|||
playerOptions: { |
|||
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度 |
|||
autoplay: true, //如果true,浏览器准备好时开始回放。 |
|||
muted: false, // 默认情况下将会消除任何音频。 |
|||
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: { |
|||
sendMessageToIframe() { |
|||
const message = { |
|||
token: this.token, |
|||
}; |
|||
const iframe = this.$refs.myIframe; |
|||
iframe.contentWindow.postMessage(message, "*"); |
|||
}, |
|||
getAuthCameras(token){ |
|||
var that=this; |
|||
this.$http.post("http://172.20.41.195:9006/video/api/getAuthCameras",null,{ |
|||
headers: { |
|||
Authorization: token |
|||
}}) |
|||
.then((res) => { |
|||
that.videoSrc="http://172.20.41.195:9015/video-play-plug?token="+that.token+"&playType=realPlay"+"&cameraCode="+res.data.data[0].code |
|||
}); |
|||
}, |
|||
getLogin(){ |
|||
this.$http |
|||
.post("http://172.20.41.195:9006/video/api/login",this.userData) |
|||
.then((res) => { |
|||
this.token=res.data.data.token; |
|||
this.getAuthCameras(res.data.data.token); |
|||
}); |
|||
props: { |
|||
dataV: { |
|||
type: Object, |
|||
default: () => {} |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.getLogin(); |
|||
created() { |
|||
// debugger |
|||
// this.playerOptions.sources[0].src = this.data.src; |
|||
}, |
|||
components: {}, |
|||
methods: { |
|||
handleClose(done) { |
|||
// done(); |
|||
this.$emit('close'); |
|||
this.dialogVisible = false |
|||
}, |
|||
async videoLogin(){ |
|||
console.log(this.dataV); |
|||
let url = "/auth/thirdlogin/video/login" |
|||
let {data,code,msg} = await requestPost(url) |
|||
if(code == 0 ){ |
|||
this.playerOptions.sources[0].src = "http://172.20.41.195:9015/video-play-plug?token="+data.token+"&playType=realPlay"+"&cameraCode="+this.dataV.code |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::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