chore(video): split demo (#2929)

src/packages/__VUE/video/demo/autoplay.vue

@@ -0,0 +1,18 @@
+<template>
+  <nut-cell>
+    <nut-video :source="source" :options="options" />
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  autoplay: true,
+  muted: true,
+  controls: true
+});
+</script>

src/packages/__VUE/video/demo/background.vue

@@ -0,0 +1,21 @@
+<template>
+  <nut-cell>
+    <nut-video :source="source" :options="options" />
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  controls: false,
+  autoplay: true,
+  muted: true,
+  disabled: true,
+  playsinline: true,
+  loop: true
+});
+</script>

src/packages/__VUE/video/demo/basic.vue

@@ -0,0 +1,25 @@
+<template>
+  <nut-cell>
+    <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend" />
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  controls: true
+});
+const play = (el) => {
+  console.log('play', el);
+};
+const pause = (el) => {
+  console.log('pause', el);
+};
+const playend = (el) => {
+  console.log('playend', el);
+};
+</script>

src/packages/__VUE/video/demo/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('autoplay') }}</h2>
+    <Autoplay />
+
+    <h2>{{ t('poster') }}</h2>
+    <Poster />
+
+    <h2>{{ t('playsinline') }}</h2>
+    <Playsinline />
+
+    <h2>{{ t('background') }}</h2>
+    <Background />
+
+    <h2>{{ t('methods') }}</h2>
+    <Methods />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Autoplay from './autoplay.vue';
+import Poster from './poster.vue';
+import Playsinline from './playsinline.vue';
+import Background from './background.vue';
+import Methods from './methods.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    autoplay: '自动播放',
+    poster: '视频封面海报设置',
+    playsinline: '行内播放',
+    background: '设置视频为背景图',
+    methods: 'Ref 方法'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    autoplay: 'Auto play',
+    poster: 'Video cover poster settings',
+    playsinline: 'play inline',
+    background: 'Set video as background',
+    methods: 'Ref Methods'
+  }
+});
+</script>

src/packages/__VUE/video/demo/methods.vue

@@ -0,0 +1,33 @@
+<template>
+  <nut-cell>
+    <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend" />
+  </nut-cell>
+  <nut-space wrap>
+    <nut-button type="success" @click="videoRef.play()">播放</nut-button>
+    <nut-button type="warning" @click="videoRef.pause()">暂停</nut-button>
+    <nut-button type="danger" @click="videoRef.stop()">结束</nut-button>
+    <nut-button type="success" @click="videoRef.muted()">静音</nut-button>
+    <nut-button type="danger" @click="videoRef.unmuted()">取消静音</nut-button>
+  </nut-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const videoRef = ref();
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  controls: true
+});
+const play = (el) => {
+  console.log('play', el);
+};
+const pause = (el) => {
+  console.log('pause', el);
+};
+const playend = (el) => {
+  console.log('playend', el);
+};
+</script>

src/packages/__VUE/video/demo/playsinline.vue

@@ -0,0 +1,17 @@
+<template>
+  <nut-cell>
+    <nut-video :source="source" :options="options" />
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  playsinline: true,
+  controls: true
+});
+</script>

src/packages/__VUE/video/demo/poster.vue

@@ -0,0 +1,18 @@
+<template>
+  <nut-cell>
+    <nut-video :source="source" :options="options" />
+  </nut-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const source = ref({
+  src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+  type: 'video/mp4'
+});
+const options = ref({
+  controls: true,
+  poster:
+    'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+});
+</script>