forked from kongfp/Tp_Web2.0
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.
49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
2 years ago
|
<script setup lang="ts">
|
||
|
|
import DPlayer from "dplayer";
|
||
|
|
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
||
|
|
|
||
|
|
const videoRef = ref();
|
||
|
|
const videoUrl = ref("");
|
||
|
|
const highlight = ref([]);
|
||
|
|
const state = reactive({
|
||
|
|
instance: null
|
||
|
|
});
|
||
|
|
// const props = defineProps({
|
||
|
|
// video: {
|
||
|
|
// type: Object,
|
||
|
|
// // eslint-disable-next-line vue/require-valid-default-prop
|
||
|
|
// default: {
|
||
|
|
// url: videoUrl.value
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
const video = ref({
|
||
|
|
url: videoUrl.value
|
||
|
|
})
|
||
|
|
onMounted(() => {
|
||
|
|
videoUrl.value = sessionStorage.getItem("video_url");
|
||
|
|
highlight.value = JSON.parse(sessionStorage.getItem("highlights"));
|
||
|
|
const player = {
|
||
|
|
container: videoRef.value,
|
||
|
|
video: video.value,
|
||
|
|
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
|
||
|
|
};
|
||
|
|
state.instance = new DPlayer(player);
|
||
|
|
});
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
state.instance.destroy();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div ref="videoRef" />
|
||
|
|
</template>
|