<template>
|
<div style="width: 100%;height: 100%;">
|
<div v-if="showId!=''" v-show="imgSXTUrl!=''" style="height: 100%;width: 100%;">
|
<video
|
:id="'videoElement' + showId"
|
controls
|
autoplay
|
muted
|
controlsList="nodownload"
|
:disablePictureInPicture="true"
|
style="width: 100%; height: 100%; object-fit: contain"
|
></video>
|
</div>
|
<div v-if="imgSXTUrl==''" style="margin-left: calc(50% - 36px);float: left;margin-top: calc(20% - 5px);color: white;">暂无播放源</div>
|
</div>
|
</template>
|
|
<script>
|
import flvjs from "flv.js";
|
/** 视频信息界面 **/
|
export default {
|
name: 'Index',
|
components: {
|
},
|
props: {
|
showId: {
|
default: false,
|
type: Number
|
}
|
},
|
data() {
|
return {
|
imgSXTUrl :'',
|
lookVideoImgMax: false,
|
flvPlayer: {},
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
/** 开始连接摄像头 */
|
joinSXT(item) {
|
this.closeSXT();
|
this.imgSXTUrl=item.playUrl;
|
var lookId="videoElement"+ this.showId;
|
const that = this;
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById(lookId);
|
videoElement.addEventListener("click", mouseHandler, false);
|
function mouseHandler(event) {
|
event.preventDefault();
|
}//这个我是用来防止用户点击，可不加
|
that.flvPlayer = flvjs.createPlayer({
|
type: "flv",
|
url: this.imgSXTUrl,
|
//url: 'http://127.0.0.1:8111/flv?port=8112&app=live&stream=test',
|
isLive: true,
|
hasAudio: false, // 关闭声音
|
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等
|
// cors: true,
|
enableWorker: false, //不启用分离线程
|
enableStashBuffer: false, //关闭IO隐藏缓冲区
|
autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存
|
autoCleanupMaxBackwardDuration: 12, // 当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
|
autoCleanupMinBackwardDuration: 60, //指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
|
stashInitialSize: 128, // 缓存大小(kb) 默认384kb
|
fixAudioTimestampGap: false,
|
});
|
that.flvPlayer.attachMediaElement(videoElement);
|
that.flvPlayer.load();
|
that.flvPlayer.play(); //不用打开
|
this.flvPlayer=that.flvPlayer;
|
}
|
},
|
/** 断开连接摄像头 */
|
closeSXT(){
|
if(this.imgSXTUrl && this.imgSXTUrl!=''){
|
this.imgSXTUrl='';
|
if(this.flvPlayer){
|
this.flvPlayer.destroy();//销毁实例
|
}
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dashboard-editor-container {
|
padding: 32px;
|
background-color: rgb(240, 242, 245);
|
position: relative;
|
|
.chart-wrapper {
|
background: #fff;
|
padding: 16px 16px 0;
|
margin-bottom: 32px;
|
}
|
|
}
|
.login-index-bod{
|
width:100%;
|
position:relative;
|
height:100%;
|
background-color:#fff;
|
display:flex;
|
flex-direction:row;
|
justify-content: center;
|
justify-items: center;
|
padding-top:13%;
|
}
|
|
@media (max-width:1024px) {
|
.chart-wrapper {
|
padding: 8px;
|
}
|
}
|
.selectDivP{
|
color: #00c6f0;
|
}
|
|
|
//弹框头部
|
::v-deep .el-dialog__header {
|
--el-text-color-primary: #565656;
|
--el-text-color-regular: #565656;
|
padding: 0 !important;
|
width: 100%;
|
height: 64px;
|
background: linear-gradient(90deg, #565656 0%, #565656 100%);
|
}
|
//弹框标题
|
::v-deep .el-dialog__title {
|
margin-left: 24px;
|
line-height: 64px;
|
color: white;
|
}
|
//弹框内容部分
|
::v-deep .el-dialog__body {
|
--el-bg-color: #565656 !important;
|
--el-text-color-regular: #565656;
|
padding: 0px 0px;
|
}
|
|
|
</style>
|
