docs(video): add international en-us

src/packages/__VUE/video/demo.vue

@@ -1,41 +1,63 @@
 <template>
   <div class="demo">
-    <h4>基础用法</h4>
+    <h4>{{ translate('basic') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>自动播放</h4>
+    <h4>{{ translate('title1') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options1" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>初始化静音</h4>
+    <h4>{{ translate('title2') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options2" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>视频封面海报设置</h4>
+    <h4>{{ translate('title3') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options3" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>行内播放</h4>
+    <h4>{{ translate('title4') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options4" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>设置视频为背景图</h4>
+    <h4>{{ translate('title5') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options5" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>视频切换</h4>
+    <h4>{{ translate('title6') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source1" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <nut-button type="primary" @click="changeVideo" class="m-b">切换视频</nut-button>
+    <nut-button type="primary" @click="changeVideo" class="m-b">{{ translate('title6') }}</nut-button>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('video');
+const { createDemo, translate } = createComponent('video');
+
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '自动播放',
+    title2: '初始化静音',
+    title3: '视频封面海报设置',
+    title4: '行内播放',
+    title5: '设置视频为背景图',
+    title6: '视频切换'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Auto play',
+    title2: 'Initialize mute',
+    title3: 'Video cover poster settings',
+    title4: 'play inline',
+    title5: 'Set video as background',
+    title6: 'Video switching'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -85,7 +107,7 @@ export default createDemo({
       state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
     };
 
-    return { play, pause, playend, ...toRefs(state), changeVideo };
+    return { play, pause, playend, ...toRefs(state), changeVideo, translate };
   }
 });
 </script>

src/packages/__VUE/video/doc.en-US.md

@@ -0,0 +1,267 @@
+#  Video
+
+### Intro
+
+Video player implemented by native video
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+import { Video, Button } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Video);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-video
+    :source="source"
+    :options="options"
+    @play="play"
+    @pause="pause"
+    @playend="playend">
+  </nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      source: {
+        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
+        type: "video/mp4",
+      },
+      options: {
+        controls: true,
+      },
+    });
+    const play = (elm: any) => console.log('play', elm);
+    const pause = (elm: any) => console.log('pause', elm);
+    const playend = (elm: any) => console.log('playend', elm);
+
+    return { ...toRefs(state), play, pause, playend,  };
+  }
+}
+</script>
+```
+:::
+
+### Auto play
+`autoplay` Property to set video autoplay
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          autoplay: true,
+          muted: true,
+          controls: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Initialize mute
+The `muted` property sets the initial mute of the video
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          muted: true,
+          controls: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Video cover poster settings
+The `poster` property sets the video poster
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: true,
+          poster: 'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+
+:::
+
+### play inline
+The `playsinline` property sets the mobile terminal video to play in line and prevents the newly opened page from playing (compatible with IOS and some Android machines)
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          playsinline: true,
+          controls: true,
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Set video as background
+When setting the video as the background image, it is necessary to set `muted`, `disabled`, `operation prohibited`, `loop`, `loop` and `autoplay` to `true`, and the mobile terminal needs to set `playinline` for in-line display
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: false,
+          autoplay: true,
+          muted: true,
+          disabled: true,
+          playsinline: true,
+          loop: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Video switching
+Reset the video when the video address changes
+
+:::demo
+```html
+<template>
+  <nut-video :source="source1" :options="options"></nut-video>
+  <nut-button type="primary" @click="changeVideo">Video switching</nut-button>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source1: {
+          src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: true
+        },
+      });
+      const changeVideo = () => {
+        state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
+      };
+
+      return { ...toRefs(state), changeVideo };
+  }
+}
+</script>
+```
+:::
+
+
+## API
+
+### Props
+
+| Attribute           | Description                                                                        | Type    | Default  |
+|---------------------|------------------------------------------------------------------------------------|---------|----------|
+| source              | Video url and type settings                                                        | Object  | -        |
+| options             | Control video playback properties                                                  | Object  | required |
+| options.autoplay    | Auto play                                                                          | Boolean | false    |
+| options.poster      | Poster settings                                                                    | String  | -        |
+| options.loop        | Poster loop                                                                        | Boolean | false    |
+| options.controls    | Show operation control                                                             | Boolean | true     |
+| options.muted       | Mute                                                                               | Boolean | false    |
+| options.volume      | Volume control                                                                     | Number  | 0.5      |
+| options.disabled    | Disable operation (e.g. background image of circular playback, prohibit operation) | Boolean | false    |
+| options.playsinline | Whether to set as inline playback element (solve Android compatibility problem)    | Boolean | false    |
+
+### Events
+
+| Event   | Description                  | Arguments |
+|---------|------------------------------|-----------|
+| play    | play event                   | -         |
+| pause   | pause event                  | -         |
+| playend | Playback completion callback | -         |