<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 class="loadEffect" id="loading" style="display:none;">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
<canvas
|
ref="playCanvas"
|
id="paly-canvas"
|
width="960"
|
height="540"
|
></canvas>
|
</div>
|
|
<!-- 控制条 -->
|
<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>
|
</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>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/*
|
2021.09.22 添加多个录像地址的处理, 与录像模块约定, 用 || 分割多个视频地址, 前端处理播放.
|
*/
|
import { Player } from './wasm/player'
|
import VideoRuleData from '@/Pool/VideoRuleData'
|
import { getAllPolygon } from '@/api/polygon'
|
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,
|
},
|
},
|
|
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,
|
}
|
},
|
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()
|
|
// 录像URL处理, 可能存在多个录像地址
|
if (!this.isStream) {
|
this.videoUrls = this.videoUrl.split('||')
|
}
|
|
if (this.isStream) {
|
this.playVideo()
|
this.$nextTick(() => {
|
this.canvas = this.$refs.areaCanvas
|
this.ctx = this.canvas.getContext('2d')
|
this.ctx.lineWidth = 1
|
this.initArea()
|
})
|
}
|
},
|
beforeDestroy() {
|
this.player.stop()
|
},
|
methods: {
|
checkConnect(id) {
|
if (id !== this.playerId) {
|
return
|
}
|
|
if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) {
|
if (this.wfs.websocketLoader.client.disconnected) {
|
this.playVideo()
|
console.log('实时视频已断开，正在重连')
|
return
|
}
|
}
|
|
let _this = this
|
setTimeout(() => {
|
_this.checkConnect(id)
|
}, 10000)
|
},
|
getUuid() {
|
var s = []
|
var hexDigits = '0123456789abcdefghijkopqrst'
|
for (var i = 0; i < 36; i++) {
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
|
}
|
s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
s[8] = s[13] = s[18] = s[23] = '-'
|
var uuid = s.join('')
|
return uuid
|
},
|
// 回显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]
|
}
|
|
if (url == '') {
|
return
|
}
|
|
if (this.player.hPlayer == 0) {
|
this.player.play(
|
url,
|
this.$refs.playCanvas,
|
this.isStream,
|
this.$refs.timeTrack,
|
this.$refs.timeLabel,
|
payload
|
)
|
} else if (this.player.PlayOrPause == 0) {
|
this.player.resume()
|
} else {
|
this.player.pause()
|
}
|
|
this.playerStatus = this.player.PlayOrPause
|
let randomId = this.getUuid()
|
this.checkConnect(randomId)
|
},
|
|
stopVideo() {
|
if (this.player.hPlayer == 0) return
|
|
this.player.stop()
|
},
|
|
fullScreen() {
|
this.player.fullscreen()
|
},
|
|
playPrev() {
|
this.playerIndex--
|
this.player.stop()
|
this.playVideo()
|
},
|
|
playNext() {
|
this.playerIndex++
|
this.player.stop()
|
this.playVideo()
|
console.log(this.playerIndex, this.videoUrls.length)
|
},
|
},
|
}
|
</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: 2147483648;
|
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% - 220px);
|
width: -moz-calc(100% - 220px);
|
width: calc(100% - 220px);
|
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;
|
}
|
}
|
|
.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;
|
}
|
</style>
|
