feat: add React and Vue examples with Artplayer integration

- 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.

example/react.js/src/App.tsx

@@ -0,0 +1,31 @@
+import Artplayer, { type Option } from 'artplayer'
+import Player from './Player'
+
+function getInstance(art: Artplayer) {
+  console.log(art)
+}
+
+const style = {
+  width: '800px',
+  height: '600px',
+  margin: '60px auto 0',
+}
+
+const option: Partial<Option> = {
+  url: 'https://artplayer.org/assets/sample/video.mp4',
+  autoSize: true,
+}
+
+function App() {
+  return (
+    <div>
+      <Player
+        style={style}
+        option={option}
+        getInstance={getInstance}
+      />
+    </div>
+  )
+}
+
+export default App

example/react.js/src/Player.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import Artplayer, { type Option } from 'artplayer'
+
+// Test i18n
+import fr from 'artplayer/i18n/fr'
+import id from 'artplayer/i18n/id'
+
+// Test plugins
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
+import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip'
+
+interface PlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+  option: Partial<Option>,
+  getInstance?: (art: Artplayer) => void
+}
+
+export default function Player({ option, getInstance, ...rest }: PlayerProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const art = new Artplayer({
+      ...option,
+      container: containerRef.current,
+      url: option.url as string,
+      i18n: { id, fr },
+      lang: 'fr',
+      plugins: [
+        artplayerPluginDocumentPip({}),
+        artplayerPluginDanmuku({
+          danmuku: 'https://artplayer.org/assets/sample/danmuku.xml',
+        }),
+      ],
+    })
+
+    if (typeof getInstance === 'function') {
+      getInstance(art)
+    }
+
+    return () => {
+      art.destroy(false)
+    }
+  }, [option, getInstance])
+
+  return <div ref={containerRef} {...rest}></div>
+}

example/react.js/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root') as HTMLDivElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)