mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 01:21:20 -08:00
feat: add danmuku plugin documentation and i18n setup
- Created a new documentation file for the danmuku plugin with interactive code execution. - Added comprehensive i18n setup instructions, including default language settings, language imports, and examples for adding and modifying languages. - Introduced a test file to verify the integration of the danmuku plugin.
This commit is contained in:
Harvey Zack committed
1 parent
012dde8da4
commit
c911928166
103 files changed
+416
-370
No files matched your search
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-ads.esm.js",
|
||||
"require": "./dist/artplayer-plugin-ads.js",
|
||||
"default": "./dist/artplayer-plugin-ads.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-ads.mjs",
|
||||
"require": "./dist/artplayer-plugin-ads.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-ads.js",
|
||||
"legacy": "dist/artplayer-plugin-ads.legacy.js",
|
||||
"module": "dist/artplayer-plugin-ads.esm.js",
|
||||
"types": "types/artplayer-plugin-ads.d.ts",
|
||||
"main": "./dist/artplayer-plugin-ads.js",
|
||||
"module": "./dist/artplayer-plugin-ads.mjs",
|
||||
"types": "./types/artplayer-plugin-ads.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-ads.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-ambilight.esm.js",
|
||||
"require": "./dist/artplayer-plugin-ambilight.js",
|
||||
"default": "./dist/artplayer-plugin-ambilight.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-ambilight.mjs",
|
||||
"require": "./dist/artplayer-plugin-ambilight.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-ambilight.js",
|
||||
"legacy": "dist/artplayer-plugin-ambilight.legacy.js",
|
||||
"module": "dist/artplayer-plugin-ambilight.esm.js",
|
||||
"types": "types/artplayer-plugin-ambilight.d.ts",
|
||||
"main": "./dist/artplayer-plugin-ambilight.js",
|
||||
"module": "./dist/artplayer-plugin-ambilight.mjs",
|
||||
"types": "./types/artplayer-plugin-ambilight.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-ambilight.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-asr.esm.js",
|
||||
"require": "./dist/artplayer-plugin-asr.js",
|
||||
"default": "./dist/artplayer-plugin-asr.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-asr.mjs",
|
||||
"require": "./dist/artplayer-plugin-asr.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-asr.js",
|
||||
"legacy": "dist/artplayer-plugin-asr.legacy.js",
|
||||
"module": "dist/artplayer-plugin-asr.esm.js",
|
||||
"types": "types/artplayer-plugin-asr.d.ts",
|
||||
"main": "./dist/artplayer-plugin-asr.js",
|
||||
"module": "./dist/artplayer-plugin-asr.mjs",
|
||||
"types": "./types/artplayer-plugin-asr.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-asr.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-auto-thumbnail.esm.js",
|
||||
"require": "./dist/artplayer-plugin-auto-thumbnail.js",
|
||||
"default": "./dist/artplayer-plugin-auto-thumbnail.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-auto-thumbnail.mjs",
|
||||
"require": "./dist/artplayer-plugin-auto-thumbnail.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-auto-thumbnail.js",
|
||||
"legacy": "dist/artplayer-plugin-auto-thumbnail.legacy.js",
|
||||
"module": "dist/artplayer-plugin-auto-thumbnail.esm.js",
|
||||
"types": "types/artplayer-plugin-auto-thumbnail.d.ts",
|
||||
"main": "./dist/artplayer-plugin-auto-thumbnail.js",
|
||||
"module": "./dist/artplayer-plugin-auto-thumbnail.mjs",
|
||||
"types": "./types/artplayer-plugin-auto-thumbnail.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-auto-thumbnail.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-chapter.esm.js",
|
||||
"require": "./dist/artplayer-plugin-chapter.js",
|
||||
"default": "./dist/artplayer-plugin-chapter.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-chapter.mjs",
|
||||
"require": "./dist/artplayer-plugin-chapter.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-chapter.js",
|
||||
"legacy": "dist/artplayer-plugin-chapter.legacy.js",
|
||||
"module": "dist/artplayer-plugin-chapter.esm.js",
|
||||
"types": "types/artplayer-plugin-chapter.d.ts",
|
||||
"main": "./dist/artplayer-plugin-chapter.js",
|
||||
"module": "./dist/artplayer-plugin-chapter.mjs",
|
||||
"types": "./types/artplayer-plugin-chapter.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-chapter.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-chromecast.esm.js",
|
||||
"require": "./dist/artplayer-plugin-chromecast.js",
|
||||
"default": "./dist/artplayer-plugin-chromecast.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-chromecast.mjs",
|
||||
"require": "./dist/artplayer-plugin-chromecast.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-chromecast.js",
|
||||
"legacy": "dist/artplayer-plugin-chromecast.legacy.js",
|
||||
"module": "dist/artplayer-plugin-chromecast.esm.js",
|
||||
"types": "types/artplayer-plugin-chromecast.d.ts",
|
||||
"main": "./dist/artplayer-plugin-chromecast.js",
|
||||
"module": "./dist/artplayer-plugin-chromecast.mjs",
|
||||
"types": "./types/artplayer-plugin-chromecast.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-chromecast.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,14 +18,15 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-danmuku-mask.esm.js",
|
||||
"require": "./dist/artplayer-plugin-danmuku-mask.js",
|
||||
"default": "./dist/artplayer-plugin-danmuku-mask.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-danmuku-mask.mjs",
|
||||
"require": "./dist/artplayer-plugin-danmuku-mask.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-danmuku-mask.js",
|
||||
"legacy": "dist/artplayer-plugin-danmuku-mask.legacy.js",
|
||||
"module": "dist/artplayer-plugin-danmuku-mask.esm.js",
|
||||
"types": "types/artplayer-plugin-danmuku-mask.d.ts",
|
||||
"main": "./dist/artplayer-plugin-danmuku-mask.js",
|
||||
"module": "./dist/artplayer-plugin-danmuku-mask.mjs",
|
||||
"types": "./types/artplayer-plugin-danmuku-mask.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-danmuku-mask.legacy.js",
|
||||
"browserslist": "last 1 Chrome version",
|
||||
"dependencies": {
|
||||
"@mediapipe/selfie_segmentation": "^0.1.1675465747",
|
||||
|
||||
@@ -17,8 +17,15 @@
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"main": "dist/artplayer-plugin-danmuku.js",
|
||||
"types": "types/artplayer-plugin-danmuku.d.ts",
|
||||
"legacy": "dist/artplayer-plugin-danmuku.legacy.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-danmuku.mjs",
|
||||
"require": "./dist/artplayer-plugin-danmuku.js"
|
||||
}
|
||||
},
|
||||
"main": "./dist/artplayer-plugin-danmuku.js",
|
||||
"module": "./dist/artplayer-plugin-danmuku.mjs",
|
||||
"types": "./types/artplayer-plugin-danmuku.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-danmuku.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-dash-control.esm.js",
|
||||
"require": "./dist/artplayer-plugin-dash-control.js",
|
||||
"default": "./dist/artplayer-plugin-dash-control.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-dash-control.mjs",
|
||||
"require": "./dist/artplayer-plugin-dash-control.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-dash-control.js",
|
||||
"legacy": "dist/artplayer-plugin-dash-control.legacy.js",
|
||||
"module": "dist/artplayer-plugin-dash-control.esm.js",
|
||||
"types": "types/artplayer-plugin-dash-control.d.ts",
|
||||
"main": "./dist/artplayer-plugin-dash-control.js",
|
||||
"module": "./dist/artplayer-plugin-dash-control.mjs",
|
||||
"types": "./types/artplayer-plugin-dash-control.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-dash-control.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -17,8 +17,15 @@
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"main": "dist/artplayer-plugin-document-pip.js",
|
||||
"types": "types/artplayer-plugin-document-pip.d.ts",
|
||||
"legacy": "dist/artplayer-plugin-document-pip.legacy.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-document-pip.mjs",
|
||||
"require": "./dist/artplayer-plugin-document-pip.js"
|
||||
}
|
||||
},
|
||||
"main": "./dist/artplayer-plugin-document-pip.js",
|
||||
"module": "./dist/artplayer-plugin-document-pip.mjs",
|
||||
"types": "./types/artplayer-plugin-document-pip.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-document-pip.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-hls-control.esm.js",
|
||||
"require": "./dist/artplayer-plugin-hls-control.js",
|
||||
"default": "./dist/artplayer-plugin-hls-control.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-hls-control.mjs",
|
||||
"require": "./dist/artplayer-plugin-hls-control.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-hls-control.js",
|
||||
"legacy": "dist/artplayer-plugin-hls-control.legacy.js",
|
||||
"module": "dist/artplayer-plugin-hls-control.esm.js",
|
||||
"types": "types/artplayer-plugin-hls-control.d.ts",
|
||||
"main": "./dist/artplayer-plugin-hls-control.js",
|
||||
"module": "./dist/artplayer-plugin-hls-control.mjs",
|
||||
"types": "./types/artplayer-plugin-hls-control.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-hls-control.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-iframe.esm.js",
|
||||
"require": "./dist/artplayer-plugin-iframe.js",
|
||||
"default": "./dist/artplayer-plugin-iframe.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-iframe.mjs",
|
||||
"require": "./dist/artplayer-plugin-iframe.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-iframe.js",
|
||||
"legacy": "dist/artplayer-plugin-iframe.legacy.js",
|
||||
"module": "dist/artplayer-plugin-iframe.esm.js",
|
||||
"types": "types/artplayer-plugin-iframe.d.ts",
|
||||
"main": "./dist/artplayer-plugin-iframe.js",
|
||||
"module": "./dist/artplayer-plugin-iframe.mjs",
|
||||
"types": "./types/artplayer-plugin-iframe.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-iframe.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,14 +18,15 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-libass.esm.js",
|
||||
"require": "./dist/artplayer-plugin-libass.js",
|
||||
"default": "./dist/artplayer-plugin-libass.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-libass.mjs",
|
||||
"require": "./dist/artplayer-plugin-libass.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-libass.js",
|
||||
"legacy": "dist/artplayer-plugin-libass.legacy.js",
|
||||
"module": "dist/artplayer-plugin-libass.esm.js",
|
||||
"types": "types/artplayer-plugin-libass.d.ts",
|
||||
"main": "./dist/artplayer-plugin-libass.js",
|
||||
"module": "./dist/artplayer-plugin-libass.mjs",
|
||||
"types": "./types/artplayer-plugin-libass.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-libass.legacy.js",
|
||||
"browserslist": "last 1 Chrome version",
|
||||
"dependencies": {
|
||||
"libass-wasm": "^4.1.0"
|
||||
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-multiple-subtitles.esm.js",
|
||||
"require": "./dist/artplayer-plugin-multiple-subtitles.js",
|
||||
"default": "./dist/artplayer-plugin-multiple-subtitles.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-multiple-subtitles.mjs",
|
||||
"require": "./dist/artplayer-plugin-multiple-subtitles.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-multiple-subtitles.js",
|
||||
"legacy": "dist/artplayer-plugin-multiple-subtitles.legacy.js",
|
||||
"module": "dist/artplayer-plugin-multiple-subtitles.esm.js",
|
||||
"types": "types/artplayer-plugin-multiple-subtitles.d.ts",
|
||||
"main": "./dist/artplayer-plugin-multiple-subtitles.js",
|
||||
"module": "./dist/artplayer-plugin-multiple-subtitles.mjs",
|
||||
"types": "./types/artplayer-plugin-multiple-subtitles.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-multiple-subtitles.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,14 +18,15 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-vast.esm.js",
|
||||
"require": "./dist/artplayer-plugin-vast.js",
|
||||
"default": "./dist/artplayer-plugin-vast.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-vast.mjs",
|
||||
"require": "./dist/artplayer-plugin-vast.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-vast.js",
|
||||
"legacy": "dist/artplayer-plugin-vast.legacy.js",
|
||||
"module": "dist/artplayer-plugin-vast.esm.js",
|
||||
"types": "types/artplayer-plugin-vast.d.ts",
|
||||
"main": "./dist/artplayer-plugin-vast.js",
|
||||
"module": "./dist/artplayer-plugin-vast.mjs",
|
||||
"types": "./types/artplayer-plugin-vast.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-vast.legacy.js",
|
||||
"browserslist": "last 1 Chrome version",
|
||||
"dependencies": {
|
||||
"@glomex/vast-ima-player": "^1.21.0"
|
||||
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-plugin-vtt-thumbnail.esm.js",
|
||||
"require": "./dist/artplayer-plugin-vtt-thumbnail.js",
|
||||
"default": "./dist/artplayer-plugin-vtt-thumbnail.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-plugin-vtt-thumbnail.mjs",
|
||||
"require": "./dist/artplayer-plugin-vtt-thumbnail.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-plugin-vtt-thumbnail.js",
|
||||
"legacy": "dist/artplayer-plugin-vtt-thumbnail.legacy.js",
|
||||
"module": "dist/artplayer-plugin-vtt-thumbnail.esm.js",
|
||||
"types": "types/artplayer-plugin-vtt-thumbnail.d.ts",
|
||||
"main": "./dist/artplayer-plugin-vtt-thumbnail.js",
|
||||
"module": "./dist/artplayer-plugin-vtt-thumbnail.mjs",
|
||||
"types": "./types/artplayer-plugin-vtt-thumbnail.d.ts",
|
||||
"legacy": "./dist/artplayer-plugin-vtt-thumbnail.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -18,13 +18,14 @@
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
"import": "./dist/artplayer-proxy-canvas.esm.js",
|
||||
"require": "./dist/artplayer-proxy-canvas.js",
|
||||
"default": "./dist/artplayer-proxy-canvas.js"
|
||||
".": {
|
||||
"import": "./dist/artplayer-proxy-canvas.mjs",
|
||||
"require": "./dist/artplayer-proxy-canvas.js"
|
||||
}
|
||||
},
|
||||
"main": "dist/artplayer-proxy-canvas.js",
|
||||
"legacy": "dist/artplayer-proxy-canvas.legacy.js",
|
||||
"module": "dist/artplayer-proxy-canvas.esm.js",
|
||||
"types": "types/artplayer-proxy-canvas.d.ts",
|
||||
"main": "./dist/artplayer-proxy-canvas.js",
|
||||
"module": "./dist/artplayer-proxy-canvas.mjs",
|
||||
"types": "./types/artplayer-proxy-canvas.d.ts",
|
||||
"legacy": "./dist/artplayer-proxy-canvas.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -83,75 +83,75 @@ The player's size depends on the size of the container `container`, so your cont
|
||||
::: code-group
|
||||
|
||||
```vue [Artplayer.vue]
|
||||
<template>
|
||||
<div ref="artRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "artplayer";
|
||||
import Artplayer from 'artplayer'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.instance = new Artplayer({
|
||||
...this.option,
|
||||
container: this.$refs.artRef,
|
||||
});
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit("get-instance", this.instance);
|
||||
});
|
||||
this.$emit('get-instance', this.instance)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy(false);
|
||||
this.instance.destroy(false)
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="artRef" />
|
||||
</template>
|
||||
```
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "./Artplayer.vue";
|
||||
import Artplayer from './Artplayer.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: "path/to/video.mp4",
|
||||
},
|
||||
style: {
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
margin: "60px auto 0",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Artplayer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: 'path/to/video.mp4',
|
||||
},
|
||||
style: {
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInstance(art) {
|
||||
console.info(art);
|
||||
console.info(art)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Artplayer :option="option" :style="style" @get-instance="getInstance" />
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -166,56 +166,56 @@ Modifying `option` directly in `Vue.js` will not change the player
|
||||
::: code-group
|
||||
|
||||
```jsx [Artplayer.jsx]
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Artplayer from 'artplayer';
|
||||
import Artplayer from 'artplayer'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
export default function Player({ option, getInstance, ...rest }) {
|
||||
const artRef = useRef();
|
||||
const artRef = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
const art = new Artplayer({
|
||||
...option,
|
||||
container: artRef.current,
|
||||
});
|
||||
useEffect(() => {
|
||||
const art = new Artplayer({
|
||||
...option,
|
||||
container: artRef.current,
|
||||
})
|
||||
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(art);
|
||||
}
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(art)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (art && art.destroy) {
|
||||
art.destroy(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
if (art && art.destroy) {
|
||||
art.destroy(false)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <div ref={artRef} {...rest}></div>;
|
||||
return <div ref={artRef} {...rest}></div>
|
||||
}
|
||||
```
|
||||
|
||||
```jsx [app.jsx]
|
||||
import React from 'react';
|
||||
import Artplayer from './ArtPlayer.jsx';
|
||||
import React from 'react'
|
||||
import Artplayer from './ArtPlayer.jsx'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
}}
|
||||
style={{
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={(art) => console.info(art)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
}}
|
||||
style={{
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={art => console.info(art)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -331,7 +331,7 @@ The production build of `artplayer.js` is only compatible with the latest major
|
||||
For ancient browsers, you can use the `artplayer.legacy.js` file, which is compatible up to: `IE 11`
|
||||
|
||||
```js
|
||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
|
||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js'
|
||||
```
|
||||
|
||||
::: code-group
|
||||
@@ -362,10 +362,10 @@ Refer to documentation: [browserslist](https://github.com/browserslist/browsersl
|
||||
|
||||
:::
|
||||
|
||||
Starting from `5.2.4`, `artplayer` and all plugins will also provide an `ESM` version of `js`, such as:
|
||||
Starting from `5.2.6`, `artplayer` and all plugins will also provide an `ESM` version of `mjs`, such as:
|
||||
|
||||
- `artplayer/dist/artplayer.esm.js`
|
||||
- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js`
|
||||
- `artplayer/dist/artplayer.mjs`
|
||||
- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@@ -385,7 +385,7 @@ Starting from `5.2.4`, `artplayer` and all plugins will also provide an `ESM` ve
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"artplayer": "https://unpkg.com/artplayer/dist/artplayer.esm.js"
|
||||
"artplayer": "https://unpkg.com/artplayer/dist/artplayer.mjs"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -440,4 +440,4 @@ Currently, the determination of mobile devices is not accurate. Sometimes, you m
|
||||
|
||||
You need to modify it before import the `Artplayer` for it to take effect
|
||||
|
||||
:::
|
||||
:::
|
||||
@@ -65,7 +65,7 @@ https://unpkg.com/artplayer/dist/artplayer.js
|
||||
</html>
|
||||
```
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
::: warning 提示
|
||||
|
||||
@@ -84,75 +84,75 @@ https://unpkg.com/artplayer/dist/artplayer.js
|
||||
::: code-group
|
||||
|
||||
```vue [Artplayer.vue]
|
||||
<template>
|
||||
<div ref="artRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "artplayer";
|
||||
import Artplayer from 'artplayer'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.instance = new Artplayer({
|
||||
...this.option,
|
||||
container: this.$refs.artRef,
|
||||
});
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit("get-instance", this.instance);
|
||||
});
|
||||
this.$emit('get-instance', this.instance)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy(false);
|
||||
this.instance.destroy(false)
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="artRef" />
|
||||
</template>
|
||||
```
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from "./Artplayer.vue";
|
||||
import Artplayer from './Artplayer.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: "path/to/video.mp4",
|
||||
},
|
||||
style: {
|
||||
width: "600px",
|
||||
height: "400px",
|
||||
margin: "60px auto 0",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Artplayer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
url: 'path/to/video.mp4',
|
||||
},
|
||||
style: {
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInstance(art) {
|
||||
console.info(art);
|
||||
console.info(art)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Artplayer :option="option" :style="style" @get-instance="getInstance" />
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -168,56 +168,56 @@ export default {
|
||||
::: code-group
|
||||
|
||||
```jsx [Artplayer.jsx]
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Artplayer from 'artplayer';
|
||||
import Artplayer from 'artplayer'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
export default function Player({ option, getInstance, ...rest }) {
|
||||
const artRef = useRef();
|
||||
const artRef = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
const art = new Artplayer({
|
||||
...option,
|
||||
container: artRef.current,
|
||||
});
|
||||
useEffect(() => {
|
||||
const art = new Artplayer({
|
||||
...option,
|
||||
container: artRef.current,
|
||||
})
|
||||
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(art);
|
||||
}
|
||||
if (getInstance && typeof getInstance === 'function') {
|
||||
getInstance(art)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (art && art.destroy) {
|
||||
art.destroy(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
if (art && art.destroy) {
|
||||
art.destroy(false)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <div ref={artRef} {...rest}></div>;
|
||||
return <div ref={artRef} {...rest}></div>
|
||||
}
|
||||
```
|
||||
|
||||
```jsx [app.jsx]
|
||||
import React from 'react';
|
||||
import Artplayer from './ArtPlayer.jsx';
|
||||
import React from 'react'
|
||||
import Artplayer from './ArtPlayer.jsx'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
}}
|
||||
style={{
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={(art) => console.info(art)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Artplayer
|
||||
option={{
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
}}
|
||||
style={{
|
||||
width: '600px',
|
||||
height: '400px',
|
||||
margin: '60px auto 0',
|
||||
}}
|
||||
getInstance={art => console.info(art)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -275,7 +275,7 @@ const art = new Artplayer(option);
|
||||
|
||||
## JavaScript
|
||||
|
||||
有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型
|
||||
有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型
|
||||
|
||||
变量：
|
||||
|
||||
@@ -336,7 +336,7 @@ const art8 = new Artplayer(option);
|
||||
对于古老的浏览器，可以使用 `artplayer.legacy.js` 文件，可以兼容到：`IE 11`
|
||||
|
||||
```js
|
||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
|
||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js'
|
||||
```
|
||||
|
||||
::: code-group
|
||||
@@ -367,10 +367,10 @@ https://unpkg.com/artplayer/dist/artplayer.legacy.js
|
||||
|
||||
:::
|
||||
|
||||
从 `5.2.4` 开始，`artplayer`和所有插件还会提供一个`ESM`版本的`js`，如：
|
||||
从 `5.2.6` 开始，`artplayer` 和所有插件还会提供一个 `ESM` 版本的 `mjs`，如：
|
||||
|
||||
- `artplayer/dist/artplayer.esm.js`
|
||||
- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js`
|
||||
- `artplayer/dist/artplayer.mjs`
|
||||
- `artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@@ -445,4 +445,4 @@ https://unpkg.com/artplayer/dist/artplayer.legacy.js
|
||||
|
||||
你需要在引入 `Artplayer` 依赖前来修改它才会生效
|
||||
|
||||
:::
|
||||
:::
|
||||
Reference in new issue
Block a user