mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 22:06:17 -08:00
Harvey Zhao
fa2c69e83d
- Implemented a React template with Vite, including ESLint configuration and necessary dependencies. - Created a Vue template with Vite, including setup for Artplayer and plugins. - Added internationalization support in both React and Vue examples. - Included sample video and Danmuku plugin integration in both frameworks. - Established project structure with appropriate configuration files and README documentation.
48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
|
|
|
|
// Test type
|
|
import Artplayer, { type Option } from 'artplayer'
|
|
|
|
// Test i18n
|
|
import fr from 'artplayer/i18n/fr'
|
|
import id from 'artplayer/i18n/id'
|
|
|
|
// Test plugins
|
|
import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
|
|
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
|
|
|
|
const props = defineProps<{ option: Partial<Option> }>()
|
|
const emit = defineEmits(['getInstance'])
|
|
|
|
const art = shallowRef<Artplayer | null>(null)
|
|
const $container = ref<HTMLDivElement | null>(null)
|
|
|
|
onMounted(() => {
|
|
art.value = new Artplayer({
|
|
...props.option,
|
|
url: props.option.url as string,
|
|
container: $container.value as HTMLDivElement,
|
|
i18n: { id, fr },
|
|
lang: 'fr',
|
|
plugins: [
|
|
artplayerPluginDocumentPip({
|
|
//
|
|
}),
|
|
artplayerPluginDanmuku({
|
|
danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
|
|
}),
|
|
],
|
|
})
|
|
emit('getInstance', art.value)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
art.value?.destroy(false)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="$container" />
|
|
</template>
|