852 lines
25 KiB
Vue
852 lines
25 KiB
Vue
<template>
|
||
<div id="videoContainer" class="vr-video">
|
||
<div class="video-wrapper">
|
||
<div id="video" @mousemove="ControlVisible()">
|
||
</div>
|
||
<div v-if="playVariables.statistics" class="vr-statistics">
|
||
<p>type：{{playVariables.type || '???'}}</p>
|
||
<p>status：{{playVariables.status || '???'}}</p>
|
||
<p>currentTime: {{playVariables.currentTime}}</p>
|
||
<p>totalTime: {{playVariables.totalTime}}</p>
|
||
<span v-if="deviceOrientationData.isSupported">
|
||
<p>
|
||
陀螺仪数据:
|
||
</p>
|
||
<p>
|
||
alpha(z轴):{{deviceOrientationData.alpha||'手机查看参数'}}
|
||
</p>
|
||
<p>
|
||
beta(x轴):{{deviceOrientationData.beta||'手机查看参数'}}
|
||
</p>
|
||
<p>
|
||
gamma(y轴):{{deviceOrientationData.gamma||'手机查看参数'}}
|
||
</p></span>
|
||
|
||
</div>
|
||
<div class="vr-func">
|
||
<div v-if="playVariables.status == 'pause'&&!playVariables.playClick"
|
||
@click="player.play();playVariables.playClick=true" class="btns-play">
|
||
<i class="iconfont icon-icon_play"></i>
|
||
</div>
|
||
<div v-else-if="playVariables.status == 'playing'&&!playVariables.playClick" @click="player.pause()"
|
||
class="btns-pause">
|
||
<i class="iconfont icon-ai07"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="playVariables.status == 'loading'" class="vr-loading">
|
||
<div class="border"></div>
|
||
<div class="slow"></div>
|
||
<div class="fast"></div>
|
||
</div>
|
||
<div class="vr-bar" v-if="playVariables.playClick" id="control">
|
||
<div class="bg"></div>
|
||
<div class="btns">
|
||
<div v-if="playVariables.status === 'playing'" @click="player.pause()" class="btns-pause">
|
||
<i class="iconfont icon-ai07"></i>
|
||
</div>
|
||
<div v-else @click="player.play()" class="btns-play">
|
||
<i class="iconfont icon-icon_play"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="playVariables.type == 'normal'" class="progress-container">
|
||
<div @click="jumpTo($event)" class="progress-wrapper">
|
||
<div class="progress" id="progress-play"></div>
|
||
</div>
|
||
<div class="btn-wrapper">
|
||
<div class="btn" id="progress-btn"></div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="type">
|
||
<span class="statu-circle"></span>
|
||
<span>{{playVariables.type}}</span>
|
||
</div>
|
||
<div @click="changeFullscreenStatu()" class="fullscreen">
|
||
<i class="iconfont icon-quanping"></i>
|
||
</div>
|
||
</div>
|
||
<div class="vr-notice" id="vrNotice" v-html="playVariables.notice">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as THREE from 'three'
|
||
import threeOrbitControls from 'three-orbit-controls'
|
||
import flvjs from 'flv.js'
|
||
const OrbitControls = threeOrbitControls(THREE)
|
||
|
||
export default {
|
||
name: 'VRLive',
|
||
props: {
|
||
option: {
|
||
default: Object
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
camera: null,
|
||
scene: null,
|
||
renderer: null,
|
||
mesh: null,
|
||
video: null,
|
||
controls: null,
|
||
deviceOrientationData: {},
|
||
hls: null,
|
||
player: {},
|
||
videoContainer: '',
|
||
playVariables: {
|
||
/*
|
||
视频类型，默认Normal
|
||
Normal
|
||
HLS
|
||
FLV
|
||
*/
|
||
type: 'Normal',
|
||
/*
|
||
播放状态，与视频播放状态对应
|
||
loading:加载中,
|
||
playing:视频播放中,包括视频中间加载后继续播放
|
||
pause:暂停或用户未点开始按钮
|
||
*/
|
||
status: 'pause',
|
||
playClick: false,
|
||
// 控件显示状态
|
||
currentTime: 0,
|
||
progress: 0,
|
||
// fullscreenStatu: false,
|
||
notice: '',
|
||
statistics: false,
|
||
error: {
|
||
code: 0,
|
||
msg: ''
|
||
}
|
||
}
|
||
// cameraVariables: {
|
||
// isUserInteracting: false,
|
||
// lon: 0,
|
||
// lat: 0,
|
||
// phi: 0,
|
||
// theta: 0,
|
||
// distance: 1,
|
||
// onPointerDownPointerX: 0,
|
||
// onPointerDownPointerY: 0,
|
||
// onPointerDownLon: 0,
|
||
// onPointerDownLat: 0,
|
||
// sensitivity: 0.1
|
||
// }
|
||
}
|
||
},
|
||
// computed: {
|
||
// fullScreenStatu () {
|
||
// return document.mozFullScreen || document.webkitIsFullScreen
|
||
// }
|
||
// },
|
||
// watch: {
|
||
// playVariables (val) {
|
||
|
||
// },
|
||
// // fullScreenStatu (val) {
|
||
// // console.log(val)
|
||
// // if (val) {
|
||
// // this.videoContainer.classList.add('fullScreen-mobile')
|
||
// // } else {
|
||
// // this.videoContainer.classList.remove('fullScreen-mobile')
|
||
// // }
|
||
// // }
|
||
// },
|
||
mounted () {
|
||
if (this.check()) {
|
||
this.playVariables.statistics = this.option.statistics
|
||
this.playVariables.type = this.option.source.type
|
||
this.videoContainer = document.getElementById('videoContainer')
|
||
this.init()
|
||
}
|
||
// 检查浏览器音频支持
|
||
if (!flvjs.isSupported()) {
|
||
console.error('Browser does not support flv.js')
|
||
return
|
||
}
|
||
|
||
// 检查浏览器音频编解码器支持
|
||
const audioTest = document.createElement('audio')
|
||
if (!audioTest.canPlayType('audio/aac')) {
|
||
console.warn('Browser might not support AAC audio codec')
|
||
}
|
||
},
|
||
methods: {
|
||
check () {
|
||
if (!this.option.source) {
|
||
console.log(new Error('无播放源'))
|
||
} else if (!this.option.source.type) {
|
||
console.log(new Error('播放源type不能为空'))
|
||
} else if (!this.option.source.url) {
|
||
console.log(new Error('播放源url不能为空'))
|
||
} else {
|
||
return true
|
||
}
|
||
},
|
||
init () {
|
||
const container = document.getElementById('video')
|
||
this.initScene()
|
||
this.initCamera(container)
|
||
this.initRenderer(container)
|
||
this.initContent()
|
||
this.initControls(container)
|
||
this.render()
|
||
// this.addMouseEvent(container)
|
||
window.addEventListener('deviceorientation', function (event) {
|
||
this.deviceOrientationData.isSupported = true
|
||
this.deviceOrientationData = event
|
||
}.bind(this), false)
|
||
window.addEventListener('resize', function () {
|
||
this.onWindowResize(container)
|
||
}.bind(this))
|
||
},
|
||
initScene () {
|
||
this.scene = new THREE.Scene()
|
||
},
|
||
initCamera (el) {
|
||
this.camera = new THREE.PerspectiveCamera(75, el.clientWidth / el.clientHeight, 1, 1100)
|
||
this.camera.position.set(1, 0, 0)
|
||
// this.camera.target = new THREE.Vector3(0, 0, 0)
|
||
},
|
||
initRenderer (el) {
|
||
this.renderer = new THREE.WebGLRenderer()
|
||
this.renderer.setSize(el.offsetWidth, el.offsetHeight)
|
||
el.appendChild(this.renderer.domElement)
|
||
},
|
||
initVideo () {
|
||
this.video = document.createElement('video')
|
||
this.video.preload = 'auto'
|
||
this.video.muted = false
|
||
this.video.volume = 1.0
|
||
this.video.crossOrigin = 'anonymous'
|
||
// 立即设置 player 为 video 元素
|
||
this.player = this.video
|
||
|
||
this.video.addEventListener('waiting', function (event) {
|
||
this.playVariables.status = 'loading'
|
||
}.bind(this))
|
||
this.video.addEventListener('playing', function (event) {
|
||
this.playVariables.status = 'playing'
|
||
}.bind(this))
|
||
this.video.addEventListener('pause', function (event) {
|
||
this.playVariables.status = 'pause'
|
||
}.bind(this))
|
||
this.video.addEventListener('canplay', function (event) {
|
||
this.playVariables.duration = this.player.duration
|
||
if (this.playVariables.status === 'loading') {
|
||
this.playVariables.status = 'playing'
|
||
}
|
||
}.bind(this))
|
||
|
||
// 判断视频类型
|
||
switch (this.option.source.type) {
|
||
case 'flv':
|
||
this.getFLV()
|
||
break
|
||
case 'hls':
|
||
this.getHLS(this.option.source.url, this.video)
|
||
break
|
||
case 'normal':
|
||
this.getNormalVideo(this.option.source.url, this.video)
|
||
break
|
||
default:
|
||
this.playVariables.error.code = 1
|
||
this.playVariables.error.msg = '未知的视频类型'
|
||
break
|
||
}
|
||
},
|
||
initContent () {
|
||
this.initVideo()
|
||
var geometry = new THREE.SphereBufferGeometry(300, 90, 90)
|
||
geometry.scale(-1, 1, 1)
|
||
var texture = new THREE.VideoTexture(this.video)
|
||
texture.minFilter = THREE.LinearFilter
|
||
texture.format = THREE.RGBFormat
|
||
var material = new THREE.MeshBasicMaterial({
|
||
map: texture
|
||
})
|
||
this.mesh = new THREE.Mesh(geometry, material)
|
||
this.mesh.position.set(0, 0, 0)
|
||
this.scene.add(this.mesh)
|
||
},
|
||
initControls (el) {
|
||
this.controls = new OrbitControls(this.camera, el)
|
||
// this.controls.target = new THREE.Vector3(0, Math.PI, 0)
|
||
this.controls.rotateSpeed = 0.05
|
||
this.controls.enableDamping = true
|
||
this.controls.dampingFactor = 0.05
|
||
},
|
||
render () {
|
||
requestAnimationFrame(this.render)
|
||
this.controls.update()
|
||
// this.cameraUpdate()
|
||
this.renderer.render(this.scene, this.camera)
|
||
},
|
||
getNormalVideo (sourceURL, el) {
|
||
const source = document.createElement('source')
|
||
source.src = sourceURL
|
||
// source.type = 'video/mp4'
|
||
el.appendChild(source)
|
||
this.player = el
|
||
},
|
||
getHLS (sourceURL, el) {
|
||
const Hls = require('hls.js')
|
||
if (Hls.isSupported()) {
|
||
this.hls = new Hls()
|
||
this.hls.loadSource(sourceURL)
|
||
this.hls.attachMedia(el)
|
||
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||
console.log('加载成功')
|
||
})
|
||
this.hls.on(Hls.Events.ERROR, (event, data) => {
|
||
throw new Error(data.response.code + ' ' + data.response.text)
|
||
})
|
||
}
|
||
this.player = el
|
||
},
|
||
// abandoned 对接rtmp流
|
||
// 非原生video标签。
|
||
// confuse object?如何作为纹理渲染?
|
||
// getRTMP (sourceURL, el) {
|
||
// el.id = 'rtmpVideo'
|
||
// console.log(el)
|
||
// this.player = videojs(el, {
|
||
// sources: [{
|
||
// src: sourceURL
|
||
// }]
|
||
// })
|
||
// this.player.on('ready', function () {
|
||
// console.log('准备就绪')
|
||
// })
|
||
// },
|
||
getFLV () {
|
||
if (flvjs.isSupported()) {
|
||
const flvPlayer = flvjs.createPlayer({
|
||
type: 'flv',
|
||
hasAudio: true,
|
||
hasVideo: true,
|
||
url: this.option.source.url
|
||
})
|
||
|
||
// 添加事件监听器
|
||
flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => {
|
||
console.error('FLV Player Error:', errorType, errorDetail)
|
||
})
|
||
|
||
flvPlayer.on(flvjs.Events.MEDIA_INFO, (mediaInfo) => {
|
||
console.log('FLV Media Info:', mediaInfo)
|
||
})
|
||
|
||
flvPlayer.attachMediaElement(this.video)
|
||
flvPlayer.load()
|
||
return flvPlayer
|
||
}
|
||
},
|
||
onWindowResize (el) {
|
||
this.camera.aspect = el.clientWidth / el.clientHeight
|
||
this.camera.updateProjectionMatrix()
|
||
this.renderer.setSize(el.clientWidth, el.clientHeight)
|
||
},
|
||
// jumpTo ($e) {
|
||
// console.log(e)
|
||
// }
|
||
async changeFullscreenStatu () {
|
||
if (this.playVariables.fullscreenStatu) {
|
||
this.exitFullscreen()
|
||
// screen.orientation.unlock()
|
||
// this.videoContainer.classList.remove('full-screen-mobile')
|
||
} else {
|
||
this.fullScreen()
|
||
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
||
this.showNotice('为了更好的观看体验<br>请关闭屏幕锁定横屏观看该视频')
|
||
}
|
||
// 只在谷歌浏览器下生效
|
||
// screen.orientation.lock('landscape-primary')
|
||
// this.videoContainer.classList.add('full-screen-mobile')
|
||
// screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation
|
||
// new ScreenOrientation().lock('landscape-secondary')
|
||
// console.log(screen)
|
||
// screen.msLockOrientation.lock('landscape-primary')
|
||
}
|
||
this.playVariables.fullscreenStatu = !this.playVariables.fullscreenStatu
|
||
},
|
||
fullScreen () {
|
||
const el = this.videoContainer
|
||
if (el.requestFullscreen) {
|
||
el.requestFullscreen()
|
||
} else if (el.mozRequestFullScreen) {
|
||
el.mozRequestFullScreen()
|
||
} else if (el.webkitRequestFullScreen) {
|
||
el.webkitRequestFullScreen()
|
||
}
|
||
},
|
||
exitFullscreen () {
|
||
const el = document
|
||
el.exitFullscreen()
|
||
if (el.exitFullscreen) {
|
||
el.exitFullscreen()
|
||
} else if (el.mozCancelFullScreen) {
|
||
el.mozCancelFullScreen()
|
||
} else if (el.webkitCancelFullScreen) {
|
||
el.webkitCancelFullScreen()
|
||
}
|
||
},
|
||
showNotice (msg) {
|
||
this.playVariables.notice = msg
|
||
const notice = document.getElementById('vrNotice')
|
||
if (notice.classList.contains('vr-notice-show')) {
|
||
notice.classList.remove('vr-notice-show')
|
||
setTimeout(() => {
|
||
notice.classList.add('vr-notice-show')
|
||
}, 0)
|
||
} else {
|
||
notice.classList.add('vr-notice-show')
|
||
}
|
||
},
|
||
ControlVisible () {
|
||
const control = document.getElementById('control')
|
||
if (this.playVariables.status === 'playing') {
|
||
if (control.classList.contains('control-hidden')) {
|
||
control.classList.remove('control-hidden')
|
||
setTimeout(() => {
|
||
control.classList.add('control-hidden')
|
||
}, 0)
|
||
} else {
|
||
control.classList.add('control-hidden')
|
||
}
|
||
}
|
||
}
|
||
// 有更好的选择 three轨道控制器
|
||
// abandoned 对接鼠标移动事件,剩余惯性尚需对接，使滑动体验更加流畅
|
||
// addMouseEvent (el) {
|
||
// el.addEventListener('mousedown', onDocumentMouseDown.bind(this), false)
|
||
// el.addEventListener('mousemove', onDocumentMouseMove.bind(this), false)
|
||
// el.addEventListener('mouseup', onDocumentMouseUp.bind(this), false)
|
||
// el.addEventListener('touchstart', onDocumentTouchStart.bind(this), false)
|
||
// el.addEventListener('touchmove', onDocumentTouchMove.bind(this), false)
|
||
// el.addEventListener('touchend', onDocumentTouchEnd.bind(this), false)
|
||
|
||
// function onDocumentMouseDown (event) {
|
||
// event.preventDefault()
|
||
|
||
// this.cameraVariables.isUserInteracting = true
|
||
|
||
// this.cameraVariables.onPointerDownPointerX = event.clientX
|
||
// this.cameraVariables.onPointerDownPointerY = event.clientY
|
||
|
||
// this.cameraVariables.onPointerDownLon = this.cameraVariables.lon
|
||
// this.cameraVariables.onPointerDownLat = this.cameraVariables.lat
|
||
// }
|
||
|
||
// function onDocumentMouseMove (event) {
|
||
// if (this.cameraVariables.isUserInteracting === true) {
|
||
// this.cameraVariables.lon =
|
||
// (this.cameraVariables.onPointerDownPointerX - event.clientX) * this.cameraVariables.sensitivity +
|
||
// this.cameraVariables.onPointerDownLon
|
||
// this.cameraVariables.lat =
|
||
// (event.clientY - this.cameraVariables.onPointerDownPointerY) * this.cameraVariables.sensitivity +
|
||
// this.cameraVariables.onPointerDownLat
|
||
// console.log(this.cameraVariables.lat)
|
||
// }
|
||
// }
|
||
|
||
// function onDocumentMouseUp () {
|
||
// this.cameraVariables.isUserInteracting = false
|
||
// }
|
||
|
||
// function onDocumentTouchStart (event) {
|
||
// event.preventDefault()
|
||
|
||
// this.cameraVariables.isUserInteracting = true
|
||
|
||
// this.cameraVariables.onPointerDownPointerX = event.touches[0].clientX
|
||
// this.cameraVariables.onPointerDownPointerY = event.touches[0].clientY
|
||
|
||
// this.cameraVariables.onPointerDownLon = this.cameraVariables.lon
|
||
// this.cameraVariables.onPointerDownLat = this.cameraVariables.lat
|
||
// }
|
||
|
||
// function onDocumentTouchMove (event) {
|
||
// if (this.cameraVariables.isUserInteracting === true) {
|
||
// this.cameraVariables.lon =
|
||
// (this.cameraVariables.onPointerDownPointerX - event.touches[0].clientX) * this.cameraVariables
|
||
// .sensitivity +
|
||
// this.cameraVariables.onPointerDownLon
|
||
// this.cameraVariables.lat =
|
||
// (event.touches[0].clientY - this.cameraVariables.onPointerDownPointerY) * this.cameraVariables
|
||
// .sensitivity +
|
||
// this.cameraVariables.onPointerDownLat
|
||
// }
|
||
// }
|
||
|
||
// function onDocumentTouchEnd () {
|
||
// this.cameraVariables.isUserInteracting = false
|
||
// }
|
||
// // const pre = {
|
||
// // x: '',
|
||
// // y: ''
|
||
// // }
|
||
// // // const cur = {
|
||
// // // x: '',
|
||
// // // y: ''
|
||
// // // }
|
||
// // let isDown = false
|
||
// // const self = this
|
||
// // el.onmousedown = function (event) {
|
||
// // isDown = true
|
||
// // }
|
||
// // el.onmouseup = function (event) {
|
||
// // isDown = false
|
||
// // }
|
||
// // el.onmousemove = function (event) {
|
||
// // if (isDown) {
|
||
// // console.log(event)
|
||
// // console.log(pre)
|
||
// // console.log(self.camera)
|
||
// // if (event.movementY && !event.movementX) {
|
||
// // self.camera.rotation.x -= event.movementY / 500
|
||
// // } else if (!event.movementY && event.movementX) {
|
||
// // self.camera.rotation.y += event.movementX / 500
|
||
// // } else {
|
||
// // pre.x = event.clientX
|
||
// // }
|
||
// // pre.y = event.clientY
|
||
// // }
|
||
// // }
|
||
// },
|
||
// cameraUpdate () {
|
||
// this.cameraVariables.lat = Math.max(-85, Math.min(85, this.cameraVariables.lat))
|
||
// this.cameraVariables.phi = THREE.Math.degToRad(90 - this.cameraVariables.lat)
|
||
// this.cameraVariables.theta = THREE.Math.degToRad(this.cameraVariables.lon)
|
||
// this.camera.position.x = this.cameraVariables.distance * Math.sin(this.cameraVariables.phi) * Math.cos(this.cameraVariables.theta)
|
||
// this.camera.position.y = this.cameraVariables.distance * Math.cos(this.cameraVariables.phi)
|
||
// this.camera.position.z = this.cameraVariables.distance * Math.sin(this.cameraVariables.phi) * Math.sin(this.cameraVariables.theta)
|
||
// this.camera.lookAt(this.camera.target)
|
||
// // 为后面的惯性对接
|
||
// setTimeout(() => {
|
||
// }, 1000)
|
||
// }
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.vr-video {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
.video-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
// min-height: 300px;
|
||
}
|
||
|
||
#video {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
&:hover {
|
||
.control {
|
||
display: block;
|
||
animation: mousehover 3s;
|
||
animation-delay: 5s;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
}
|
||
}
|
||
|
||
.control-hidden {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
animation: mousehover 2s;
|
||
animation-delay: 3s;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes mousehover {
|
||
100% {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.vr {
|
||
&-func {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
height: 50px;
|
||
font-size: 16px;
|
||
|
||
.btns-play,
|
||
.btns-pause {
|
||
i {
|
||
font-size: 4em;
|
||
color: rgba(255, 255, 255, 1);
|
||
transition: color .3s;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
|
||
i {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&-loading {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
width: 3em;
|
||
height: 3em;
|
||
|
||
.border {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0.45em solid rgba(99, 149, 168, 0.5);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.slow {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-width: 0.45em;
|
||
border-style: solid;
|
||
border: 0.45em solid rgba(0, 0, 0, 0);
|
||
border-top-color: rgb(7, 186, 241);
|
||
animation: slow 1.5s linear infinite;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.fast {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-width: 0.45em;
|
||
border-style: solid;
|
||
border: 0.45em solid rgba(0, 0, 0, 0);
|
||
border-top-color: rgb(10, 126, 161);
|
||
animation: fast 0.75s linear infinite;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
@keyframes slow {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes fast {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
25% {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
50% {
|
||
border-top-color: rgb(195, 236, 248);
|
||
}
|
||
|
||
75% {
|
||
transform: rotate(315deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&-bar {
|
||
position: absolute;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 1em 1em;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
||
|
||
.btns {
|
||
padding: 0.5em;
|
||
|
||
&-play,
|
||
&-pause {
|
||
i {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.progress-container {
|
||
position: relative;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 1em;
|
||
|
||
.progress-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 0.2em;
|
||
border-radius: 30px;
|
||
background-color: rgba(150, 150, 150, 1);
|
||
overflow: hidden;
|
||
|
||
.progress {
|
||
position: absolute;
|
||
width: 0%;
|
||
height: 100%;
|
||
background-color: rgb(22, 175, 236);
|
||
transition: width .5s;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.btn-wrapper {
|
||
position: absolute;
|
||
z-index: 9;
|
||
left: 1em;
|
||
width: calc(100% - 2em);
|
||
|
||
.btn {
|
||
margin-left: 0;
|
||
width: 0.8em;
|
||
height: 0.8em;
|
||
border-radius: 50%;
|
||
background-color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.type {
|
||
padding: 0 2em;
|
||
width: 100%;
|
||
font-size: 0.95em;
|
||
font-weight: 300;
|
||
color: white;
|
||
|
||
.statu-circle {}
|
||
}
|
||
|
||
.fullscreen {
|
||
i {
|
||
font-size: 1.4em;
|
||
color: white;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-notice {
|
||
position: absolute;
|
||
z-index: 99;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
padding: 0.5em 1em;
|
||
white-space: nowrap;
|
||
font-size: 1em;
|
||
color: white;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
border-radius: 0.5em;
|
||
|
||
&-show {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
animation: notice 2s;
|
||
animation-delay: 3s;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes notice {
|
||
100% {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-statistics {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 1em;
|
||
left: 1em;
|
||
padding: 0.2em 1em;
|
||
font-size: 13px;
|
||
color: white;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
border-radius: 0.2em;
|
||
}
|
||
}
|
||
|
||
&:fullscreen {
|
||
.video-wrapper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
// transform-origin: top left;
|
||
// transform: rotate(90deg) translate(-0vh, -100vw);
|
||
}
|
||
}
|
||
}
|
||
|
||
// .full-screen-mobile {
|
||
// .video-wrapper {
|
||
// position: absolute;
|
||
// z-index: 99;
|
||
// top: 0;
|
||
// left: 0;
|
||
// width: 100vh;
|
||
// height: 100vw;
|
||
// transform-origin: top left;
|
||
// transform: rotate(90deg) translate(-0vh, -100vw);
|
||
// }
|
||
|
||
// // #video {
|
||
// // width: 100%;
|
||
// // height: calc(100vw / 16 * 9);
|
||
// // }
|
||
// }
|
||
</style>
|