You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div class='playerBox'>
|
|
|
|
<div id="dplayer" ref="videoRef"></div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import Dplayer from 'dplayer';
|
|
import {onMounted, onUnmounted, ref} from "vue";
|
|
|
|
const Isvisible = ref(false)
|
|
const highlight = ref("")
|
|
const videoRef = ref(null);
|
|
|
|
onMounted (() =>{
|
|
Isvisible.value = true
|
|
let seek_time = 0
|
|
highlight.value = JSON.parse(sessionStorage.getItem("highlights"))
|
|
|
|
if (highlight.value instanceof Array) {
|
|
seek_time = highlight.value[0].time
|
|
}
|
|
|
|
|
|
videoRef.value = new Dplayer({
|
|
container: videoRef.value,
|
|
video: {
|
|
url: sessionStorage.getItem("video_url"),
|
|
},
|
|
theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
|
|
loop: false, // 是否自动循环
|
|
lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
|
|
// screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
|
|
hotkey: true, // 是否支持热键，调节音量，播放，暂停等
|
|
preload: 'auto', // 自动预加载
|
|
volume: 1, // 初始化音量
|
|
autoplay: true,
|
|
highlight: highlight.value
|
|
})
|
|
videoRef.value.seek(seek_time)
|
|
},)
|
|
|
|
onUnmounted(() => {
|
|
Isvisible.value = false;
|
|
sessionStorage.removeItem("video_url");
|
|
sessionStorage.removeItem("highlights");
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
#dplayer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 10px auto;
|
|
|
|
}
|
|
|
|
:deep(.dplayer-controller .dplayer-icons .dplayer-label){
|
|
padding-right: 50px
|
|
}
|
|
|
|
.playerBox {
|
|
width: 100%;
|
|
height: 80%;
|
|
margin: 10px auto;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav a {
|
|
margin: 100px auto;
|
|
font: normal 20px/100px '微软雅黑';
|
|
}
|
|
</style>
|