<template>
|
<div class="video-player">
|
<canvas
|
v-show="showArea"
|
id="area-canvas"
|
ref="areaCanvas"
|
width="960"
|
height="540"
|
></canvas>
|
<div class="container" id="videoPlayer">
|
<div class="canvasDiv">
|
<div
|
v-loading="videoLoading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
style="position: unset !important"
|
></div>
|
<canvas
|
ref="playCanvas"
|
id="paly-canvas"
|
width="960"
|
height="540"
|
></canvas>
|
</div>
|
|
<transition name="fade">
|
<div class="popuptext" id="myPopup" v-if="fullScreenNotice">
|
资源下载中,请稍后...
|
</div>
|
</transition>
|
|
<!-- 控制条 -->
|
<section
|
class="jsmodern-video-panel"
|
:style="{ display: isStream ? 'none' : 'block' }"
|
>
|
<!-- 播放/暂停 -->
|
<b
|
:class="
|
playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'
|
"
|
@click="playVideo"
|
></b>
|
|
<!-- 时间 -->
|
<span class="jsmodern-video-start" ref="timeLabel"
|
>00:00:00/00:00:00</span
|
>
|
|
<!-- 进度条 -->
|
<div>
|
<input
|
class="jsmodern-video-linebox"
|
ref="timeTrack"
|
type="range"
|
value="0"
|
/>
|
</div>
|
|
<!-- 声音 -->
|
<b class="jsmodern-video-volume"></b>
|
<!-- <div class="jsmodern-video-volumebox">
|
<div class="jsmodern-video-volumeline"></div>
|
<b class="jsmodern-video-volumedot"></b>
|
</div> -->
|
|
<!-- 全屏 -->
|
<b
|
class="jsmodern-video-fullin"
|
@click="fullScreen"
|
:disable="false"
|
></b>
|
|
<!-- 下载 -->
|
<i
|
class="el-icon-download jsmodern-video-download"
|
@click="downLoad"
|
style="margin: 9px 0 0 15px"
|
></i>
|
</section>
|
|
<!-- 大播放按钮 -->
|
<div v-show="!isStream">
|
<span class="video-btn" v-show="playerStatus == 0" @click="playVideo"
|
><img src="./wasm/img/bo1.png"
|
/></span>
|
|
<!-- 上一个 -->
|
<span class="video-prve" v-show="showPrev">
|
<i class="el-icon-arrow-left" @click="playPrev"></i>
|
</span>
|
|
<!-- 下一个 -->
|
<span class="video-next" v-show="showNext">
|
<i class="el-icon-arrow-right" @click="playNext"></i>
|
</span>
|
|
<!-- 播放失败 -->
|
<span class="video-error" v-show="playerStatus == -1">
|
<i class="el-icon-warning-outline" style="font-size: 40px"></i>
|
<br />
|
视频加载失败 无效的视频地址
|
</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/* eslint-disable */
|
/*
|
2021.09.22 添加多个录像地址的处理, 与录像模块约定, 用 || 分割多个视频地址, 前端处理播放.
|
*/
|
import { Player } from "./wasm/player";
|
import VideoRuleData from "@/Pool/VideoRuleData";
|
import { getAllPolygon } from "@/api/polygon.ts";
|
export default {
|
name: "CameraPlayer",
|
props: {
|
videoUrl: {
|
type: String,
|
// default: "ws://192.168.1.182:10101/ws"
|
default: `${location.protocol === "https" ? "wss" : "ws"}://${
|
location.host
|
}/ws`,
|
},
|
cameraName: {
|
type: String,
|
default: "",
|
},
|
cameraID: {
|
type: String,
|
default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4",
|
},
|
rtspUrl: {
|
type: String,
|
default:
|
"rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream",
|
},
|
isRunning: {
|
type: Boolean,
|
default: false,
|
},
|
isGb: {
|
type: Boolean,
|
default: false,
|
},
|
showArea: {
|
type: Boolean,
|
default: false,
|
},
|
isStream: {
|
type: Boolean,
|
default: true,
|
},
|
autoPlay: {
|
type: Boolean,
|
default: false,
|
},
|
preload: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
|
computed: {
|
poster() {
|
return "/images/player/player_poster.gif?t=" + Math.random();
|
},
|
showPrev() {
|
return this.playerIndex - 1 >= 0;
|
},
|
showNext() {
|
return this.playerIndex + 1 < this.videoUrls.length;
|
},
|
},
|
data() {
|
return {
|
player: null,
|
playerId: 0,
|
Camera: new VideoRuleData(),
|
showCanvas: true,
|
canvasData: {
|
line: [],
|
rect: [], // {id:'uuid', name: '矩形1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
|
arrow: [],
|
polygon: [],
|
},
|
//showProportion: 3.2,
|
//showProportionY: 3.58,
|
// showProportion: 1.036,
|
// showProportionY: 1.039,
|
showProportion: 1,
|
showProportionY: 1,
|
canvas: null,
|
ctx: null,
|
canvasWidth: 0,
|
canvasHeight: 0,
|
algoDataSocket: null,
|
playerStatus: 0,
|
videoUrls: [],
|
playerIndex: 0,
|
isEmptyUrl: false,
|
videoLoading: false,
|
loadUrl: "",
|
isFullScreen: false,
|
fullScreenNotice: false,
|
};
|
},
|
watch: {
|
rtspUrl: function (newVal, oldVal) {
|
if (newVal !== oldVal) {
|
if (this.player) {
|
this.player.stop();
|
!!this.algoDataSocket && this.algoDataSocket.close();
|
}
|
this.$nextTick(() => {
|
this.playVideo();
|
});
|
}
|
},
|
},
|
mounted() {
|
this.player = new Player();
|
this.player.preload = this.preload;
|
this.player.statusCallback = this.setPlayerStatus;
|
|
if (this.isStream) {
|
this.playVideo();
|
this.$nextTick(() => {
|
this.canvas = this.$refs.areaCanvas;
|
this.ctx = this.canvas.getContext("2d");
|
this.ctx.lineWidth = 1;
|
this.initArea();
|
});
|
} else {
|
// 录像URL处理, 可能存在多个录像地址
|
if (this.videoUrl === "") {
|
this.playerStatus = -1;
|
return;
|
}
|
|
this.videoUrls = this.videoUrl.split("||");
|
|
if (this.autoPlay || this.preload) {
|
this.playVideo();
|
}
|
}
|
},
|
beforeDestroy() {
|
this.player.stop();
|
},
|
methods: {
|
// 回显cavas数据
|
// 点击选中变色 将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内 如果不传坐标参数就是回显的方法
|
clickSelect(e) {
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
let _this = this; // 集合中遍历需要将this转存一下使用
|
_this.canvasData.line.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.canvas.style.cursor = "default";
|
});
|
_this.canvasData.rect.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[2].x / _this.showProportion,
|
v.location[2].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[3].x / _this.showProportion,
|
v.location[3].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.canvas.style.cursor = "default";
|
});
|
_this.canvasData.arrow.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
_this.drawArrow(
|
_this.ctx,
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion,
|
20,
|
30,
|
"yellow"
|
);
|
_this.canvas.style.cursor = "default";
|
});
|
_this.canvasData.polygon.forEach(function (v, i) {
|
if (v.location.length === 0) {
|
return;
|
}
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportionY
|
);
|
for (let i = 1; i < v.location.length; i++) {
|
_this.ctx.lineTo(
|
v.location[i].x / _this.showProportion,
|
v.location[i].y / _this.showProportionY
|
);
|
}
|
_this.ctx.closePath();
|
_this.ctx.stroke();
|
_this.canvas.style.cursor = "default";
|
});
|
},
|
|
// 箭头绘制函数
|
drawArrow(
|
ctx,
|
fromX,
|
fromY,
|
toX,
|
toY,
|
theta = 30,
|
headlen = 10,
|
width = 1,
|
color = "yellow"
|
) {
|
// ctx：Canvas绘图环境
|
// fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
|
// toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
|
// theta：三角斜边一直线夹角
|
// headlen：三角斜边长度
|
// width：箭头线宽度
|
// color：箭头颜色
|
// theta = typeof theta !== "undefined" ? theta : 30;
|
// headlen = typeof theta !== "undefined" ? headlen : 10;
|
// width = typeof width !== "undefined" ? width : 1;
|
// color = typeof color !== "undefined" ? color : "yellow";
|
// 计算各角度和对应的P2,P3坐标
|
let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
|
let angle1 = ((angle + theta) * Math.PI) / 180;
|
let angle2 = ((angle - theta) * Math.PI) / 180;
|
let topX = headlen * Math.cos(angle1);
|
let topY = headlen * Math.sin(angle1);
|
let botX = headlen * Math.cos(angle2);
|
let botY = headlen * Math.sin(angle2);
|
|
ctx.save();
|
ctx.beginPath();
|
let arrowX = fromX - topX;
|
let arrowY = fromY - topY;
|
ctx.moveTo(arrowX, arrowY);
|
ctx.moveTo(fromX, fromY);
|
ctx.lineTo(toX, toY);
|
arrowX = toX + topX;
|
arrowY = toY + topY;
|
ctx.moveTo(arrowX, arrowY);
|
ctx.lineTo(toX, toY);
|
arrowX = toX + botX;
|
arrowY = toY + botY;
|
ctx.lineTo(arrowX, arrowY);
|
ctx.strokeStyle = color;
|
ctx.lineWidth = width;
|
ctx.stroke();
|
ctx.restore();
|
},
|
|
// 回显图形备注
|
showRemarks(x, y, remarks) {
|
this.ctx.moveTo(x, y - 10); // 因为放大之后是y-20，所以缩小版的为y-10
|
this.ctx.fillStyle = "green"; // 设置填充颜色为绿色
|
this.ctx.font = '10px "微软雅黑"'; // 设置字体
|
this.ctx.textBaseline = "bottom"; // 设置字体底线对齐绘制基线
|
this.ctx.textAlign = "left"; // 设置字体对齐的方式
|
this.ctx.fillText(remarks, x, y - 10); // 填充文字
|
},
|
getCanvasData(data) {
|
let polyon = { ...data };
|
polyon.camera_id = this.Camera.cameraId;
|
savePolygon(polyon).then((rsp) => {
|
this.Camera.getPolygon();
|
this.Camera.getCameraTask();
|
});
|
},
|
setWidthHeight() {
|
this.canvasWidth = this.$refs.videoPlayer.offsetWidth;
|
this.canvasHeight = this.$refs.videoPlayer.offsetHeight;
|
console.log(this.canvasWidth, this.canvasHeight);
|
},
|
async initArea() {
|
if (!this.showCanvas) {
|
return;
|
}
|
|
const res = await getAllPolygon({
|
cameraId: this.TreeDataPool.selectedNode.id,
|
});
|
this.canvasData.line = res.data.line;
|
this.canvasData.rect = res.data.rect;
|
this.canvasData.arrow = res.data.arrow;
|
this.canvasData.polygon = res.data.polygon;
|
this.clickSelect(this.canvasData);
|
},
|
initAlgoDataWebScoket() {
|
if (typeof WebSocket === "undefined") {
|
console.log("error,您的浏览器不支持socket");
|
} else {
|
this.algoDataSocket = new WebSocket();
|
this.algoDataSocket.onopen = () => {
|
console.log("socket连接成功");
|
};
|
this.algoDataSocket.onerror = () => {
|
console.log("连接错误");
|
};
|
this.algoDataSocket.onmessage = (msg) => {
|
console.log(msg);
|
};
|
}
|
},
|
playVideo() {
|
if (this.isStream && this.rtspUrl == "") {
|
return;
|
}
|
|
let payload = "";
|
let url = "";
|
if (this.isStream) {
|
if (this.cameraID == "") {
|
this.cameraID = this.getUuid();
|
}
|
|
payload = JSON.stringify({
|
cameraID: this.cameraID,
|
rtspUrl: this.rtspUrl,
|
isRunning: this.isRunning,
|
isGb28181: this.isGb,
|
});
|
|
url = this.videoUrl;
|
} else {
|
url = "/httpImage/" + this.videoUrls[this.playerIndex];
|
}
|
|
this.videoLoading = true;
|
if (this.player.hPlayer == 0) {
|
this.player.play(
|
url,
|
this.$refs.playCanvas,
|
this.isStream,
|
this.$refs.timeTrack,
|
this.$refs.timeLabel,
|
payload,
|
() => {
|
this.videoLoading = false;
|
}
|
);
|
} else if (this.player.PlayOrPause == 0) {
|
this.player.resume();
|
this.videoLoading = false;
|
} else {
|
this.player.pause();
|
this.videoLoading = false;
|
}
|
|
this.playerStatus = this.player.PlayOrPause;
|
|
this.loadUrl = url;
|
},
|
setPlayerStatus(stat) {
|
this.videoLoading = false;
|
this.playerStatus = stat;
|
},
|
stopVideo() {
|
if (this.player.hPlayer == 0) return;
|
|
this.player.stop();
|
},
|
|
fullScreen() {
|
if (!this.isFullScreen) {
|
this.player.fullscreen();
|
} else {
|
this.player.exitfullscreen();
|
}
|
this.isFullScreen = !this.isFullScreen;
|
},
|
|
async downLoad() {
|
if (!this.loadUrl) {
|
this.$notify.info({
|
title: "消息",
|
message: "下载失败，无效的视频地址",
|
});
|
return;
|
}
|
|
if (this.isFullScreen) {
|
/* const screen = this.player.webglPlayer.canvas.parentNode
|
var p = document.createElement("p");
|
var txt = document.createTextNode("资源下载中,请稍后...");
|
p.appendChild(txt);
|
p.classList.add("downloadNotice");
|
screen.appendChild(p); */
|
this.fullScreenNotice = true;
|
setTimeout(() => {
|
this.fullScreenNotice = false;
|
}, 2000);
|
} else {
|
this.$notify.info({
|
title: "消息",
|
message: `资源下载中,请稍后...`,
|
});
|
}
|
|
let url = "http://" + window.location.host + this.loadUrl;
|
|
// let url = "http://localhost:8080http://192.168.20.189:6700/283,2f49bf283ad7?collection=2021-09-28-DSVAD010120190703-video"
|
let name = url.substring(url.lastIndexOf("/") + 1);
|
let responsePromise = await fetch(url);
|
let blob = await responsePromise.blob();
|
let objectURL = window.URL.createObjectURL(blob);
|
let a = document.createElement("a");
|
a.href = objectURL;
|
a.download = name;
|
a.click();
|
a.remove();
|
/* let url = 'http:/'+this.loadUrl.substring(10)
|
let link = document.createElement("a"); //创建a标签
|
let name = url.substring(url.lastIndexOf("/") + 1)
|
link.style.display = "none"; //使其隐藏
|
link.href = url; //赋予文件下载地址
|
link.setAttribute("download", name); //设置下载属性 以及文件名
|
document.body.appendChild(link); //a标签插至页面中
|
link.click(); //强制触发a标签事件 */
|
},
|
|
playPrev() {
|
this.playerIndex--;
|
this.player.stop();
|
this.playVideo();
|
},
|
|
playNext() {
|
this.playerIndex++;
|
this.player.stop();
|
this.playVideo();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
#paly-canvas,
|
#area-canvas {
|
background: transparent;
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
}
|
.video-player {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-color: #000000;
|
|
.jsmodern-video-panel {
|
display: none;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
z-index: 100;
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
color: #fff;
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
user-select: none;
|
}
|
|
.jsmodern-video-panel.jsmodern-video-panelFull {
|
left: 50%;
|
-webkit-transform: translate(-50%, -10px);
|
-ms-transform: translate(-50%, -10px);
|
transform: translate(-50%, -10px);
|
padding: 3px 5px;
|
border-radius: 8px;
|
}
|
|
.jsmodern-video-linebox {
|
height: 3px;
|
background: rgba(255, 255, 255, 0.25);
|
border-radius: 3px;
|
width: 460px;
|
width: -webkit-calc(100% - 260px);
|
width: -moz-calc(100% - 260px);
|
width: calc(100% - 260px);
|
float: left;
|
margin: 19px 0 0 65px;
|
position: relative;
|
cursor: pointer;
|
}
|
|
.jsmodern-video-pass {
|
position: absolute;
|
border-radius: 3px;
|
height: 100%;
|
background: #f81e3d;
|
}
|
|
.jsmodern-video-linedot {
|
width: 6px;
|
height: 6px;
|
background: #fff;
|
border-radius: 3px;
|
-webkit-transform: scale(1.8);
|
-ms-transform: scale(1.8);
|
transform: scale(1.8);
|
position: absolute;
|
}
|
|
.jsmodern-video-panel b {
|
cursor: pointer;
|
}
|
|
.jsmodern-video-panel b,
|
.jsmodern-video-panel span {
|
display: block;
|
float: left;
|
}
|
|
.jsmodern-video-panel span {
|
font-size: 12px;
|
cursor: default;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
user-select: none;
|
}
|
|
.jsmodern-video-start {
|
margin-left: 10px;
|
}
|
|
.jsmodern-video-start + span {
|
width: 14px;
|
height: 12px;
|
text-align: center;
|
line-height: 12px;
|
font-size: 10px;
|
overflow: hidden;
|
margin-top: 13px;
|
-webkit-transform: scale(1, 0.9) translateY(1px);
|
-ms-transform: scale(1, 0.9) translateY(1px);
|
transform: scale(1, 0.9) translateY(1px);
|
-webkit-transform-origin: left top;
|
-ms-transform-origin: left top;
|
transform-origin: left top;
|
}
|
|
.jsmodern-video-start,
|
.jsmodern-video-end {
|
width: 39px;
|
text-align: center;
|
}
|
|
.jsmodern-video-volumebox {
|
width: 80px;
|
height: 6px;
|
background: rgba(255, 255, 255, 0.25);
|
border-radius: 3px;
|
float: left;
|
margin: 18px 0 0 7px;
|
position: relative;
|
cursor: pointer;
|
}
|
|
.jsmodern-video-volumeline {
|
width: 40px;
|
height: 6px;
|
background: #f81e3d;
|
border-radius: 3px;
|
margin-top: 0;
|
}
|
|
.jsmodern-video-volumedot {
|
width: 6px;
|
height: 6px;
|
background: #fff;
|
border-radius: 3px;
|
margin: -6px 0 0 37px;
|
-webkit-transform: scale(1.8);
|
-ms-transform: scale(1.8);
|
transform: scale(1.8);
|
position: absolute;
|
}
|
|
.jsmodern-video-play,
|
.jsmodern-video-pause,
|
.jsmodern-video-volume,
|
.jsmodern-video-fullin {
|
width: 18px;
|
height: 18px;
|
margin-top: 11px;
|
background-position: center;
|
background-repeat: no-repeat;
|
}
|
|
.jsmodern-video-play {
|
margin-left: 10px;
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAe0lEQVR42q2UQRGAIBREiWAEIhjhRzCKDbCBRjGCDaQBRqDBdzntgRvLm3nXN6sMhIa7G0xBgqHGC1c9RNKcENeZHiInXLQQKdDUUL9OD3GdGOrXaSGSZ4QuddEDo/KPPrgpx1/hwc8YC90wKlckQ1MubYW79IzwOMf4AZCzZlJ6pNv5AAAAAElFTkSuQmCC);
|
}
|
|
.jsmodern-video-pause {
|
margin-left: 10px;
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAANUlEQVR42u3MMQoAAAgCwP4/9aR+VjQINtTcoNBicobkTNiS/vEQvSBBggR9hILOD8h5i74A46kzKYwr0EYAAAAASUVORK5CYII=);
|
}
|
|
.jsmodern-video-volume {
|
margin-left: 15px;
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAqklEQVR42tWT0QmDMBCGHcENXMEBhGaL9rEjZATffKwDZJdmgy7QHZo33zz/0AscBmNaCOIPH3Ke+USTq84ZIrqDdnXPgGuuoAVP4KMi0TddSlCDB5BR3GvEcy/wCYUCF8HNNwFtiBwwQco9jSKKBZQQaa4brt+en0W8eAJGiN2/IusRIiouKv9puA5bP7uXhDfsbP8gtn8GOnUgx8wD6XJHxO6NSNGhPT4LSrtjI5LQNtEAAAAASUVORK5CYII=);
|
}
|
|
.jsmodern-video-muted {
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAA00lEQVR42s2UsQ3CMBBFqZAokNLQoozgCWJ3NAxAg5QRGIEFEOkpgBFgAbIKC0AoU5nv6CJ9GQI6lIIvPcXxyd93di4D730v9Gf0Xc1mOTA0pTMKi8EFBDm1EQIJ2AKWldiw64wcsMQC3EGsDEzBhLPAM5XBi0r/XjNwBUfKxMimhcYoAzsZ78mkAkZlJBUc5L1uTbSlWbrJWuZOYU5tFJVzbsvUGs3BDTzEkMtsDnsdsQJVR0YbsOTrlzXJpw+yACwnsfGvLVLqWkTftCM2+r//0RPE3HMNwpwYwQAAAABJRU5ErkJggg==);
|
}
|
|
.jsmodern-video-fullin {
|
margin-left: 15px;
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAKlBMVEVMaXH////////////////////////////////////////////////////m1kuZAAAADXRSTlMAYBAw79DwIM9wgG9/QM+KqQAAAF5JREFUeNqNj0sSwCAIQ6Pit+X+1y2GOs7UTbNA8kYjQE05wpTK7LG8EwcdrwZB7hrcBx1FYfcDCY9UEGdbrFbiBIqpFf90PmGo7NDvtwJt1x7slmN0graWEwIny+sDBBUDznqlFGYAAAAASUVORK5CYII=);
|
}
|
|
.jsmodern-video-fullout {
|
margin-left: 15px;
|
background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAJ1BMVEVMaXH////////////////////////////////////////////////c+C/6AAAADHRSTlMAgBDQz39QIMBAML9Nf8RqAAAAaElEQVR42r2QQQ7AIAgEV6CIlv+/t3Ap3E2cyyojxIBb7JfqQu/+z+ZCIAU0QtzqEbtMGcCIcCZ0454iIuvFLDHRICkhvUNHsICVqThBnyBHZSqK4+/2Ok9OEdGNOdcSuS1xW2+3jUt8eaUDz3DmFVcAAAAASUVORK5CYII=);
|
}
|
|
b.jsmodern-video-fullFalse {
|
opacity: 0.5;
|
cursor: default;
|
}
|
|
.el-icon-download {
|
font-size: 24px;
|
width: 18px;
|
height: 18px;
|
margin-top: 7px;
|
margin-left: -12px;
|
}
|
}
|
|
.video-player:hover {
|
.jsmodern-video-panel {
|
display: block !important;
|
}
|
}
|
|
.video-btn {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
display: block;
|
width: 70px;
|
height: 70px;
|
margin-left: -35px;
|
margin-top: -35px;
|
cursor: pointer;
|
z-index: 10;
|
}
|
|
.video-prve,
|
.video-next {
|
position: absolute;
|
top: 45%;
|
font-size: 30px;
|
color: #bdbdbd;
|
cursor: pointer;
|
}
|
|
.video-prve {
|
left: 0px;
|
}
|
|
.video-next {
|
right: 0px;
|
}
|
|
.video-error {
|
text-align: center;
|
position: absolute;
|
top: 35%;
|
left: 30%;
|
font-size: 14px;
|
color: #fff;
|
}
|
|
.downloadNotice {
|
position: absolute;
|
height: 200px;
|
width: 200px;
|
background-color: pink;
|
}
|
|
.popuptext {
|
/* display:none; */
|
height: 50px;
|
line-height: 50px;
|
font-size: 20px;
|
background-color: #555;
|
opacity: 0.8;
|
color: #fff;
|
text-align: center;
|
border-radius: 25px;
|
position: relative;
|
top: 30px;
|
z-index: 1;
|
}
|
|
.fade-enter {
|
opacity: 0;
|
}
|
.fade-enter-active {
|
transition: opacity 0.5s;
|
}
|
.fade-leave-to {
|
opacity: 0;
|
}
|
.fade-leave-active {
|
transition: opacity 3s;
|
}
|
.canvasDiv .el-loading-mask {
|
z-index: 1000 !important;
|
}
|
</style>
|
