feat: video增加播放，暂停，停止，静音，取消静音方法(#2447) (#2555)

---------

Co-authored-by: Eiinu <[email protected]>

src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`video base info 1`] = `
+exports[`Video: base info 1`] = `
 "<div class=\\"nut-video\\"><video class=\\"nut-video-player\\" autoplay=\\"\\" loop=\\"\\" controls=\\"\\" playsinline=\\"true\\" webkit-playsinline=\\"true\\" x5-video-player-type=\\"h5-page\\" x5-video-player-fullscreen=\\"false\\">
-    <source src=\\"xxx.mp4\\" type=\\"video/mp4\\">
+    <source src=\\"https://storage.jd.com/about/big-final.mp4\\" type=\\"video/mp4\\">
   </video>
   <!--v-if-->
   <!--v-if-->

src/packages/__VUE/video/__tests__/video.spec.ts

@@ -3,12 +3,15 @@ import Video from '../index.vue';
 import { mockElementMethod } from '@/packages/utils/unit';
 
 mockElementMethod(HTMLMediaElement, 'load');
+mockElementMethod(HTMLMediaElement, 'pause');
 
-test('video base info', () => {
+const videoUrl = 'https://storage.jd.com/about/big-final.mp4';
+
+test('Video: base info', () => {
   const wrapper = mount(Video, {
     props: {
       source: {
-        src: 'xxx.mp4',
+        src: videoUrl,
         type: 'video/mp4',
         poster:
           'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
@@ -22,6 +25,25 @@ test('video base info', () => {
       }
     }
   });
-  expect(wrapper.find<HTMLElement>('.nut-video source').html()).toContain('xxx.mp4');
+  expect(wrapper.find<HTMLElement>('.nut-video source').html()).toContain(videoUrl);
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('Video: ref methods', () => {
+  const wrapper = mount(Video, {
+    props: {
+      source: {
+        src: videoUrl,
+        type: 'video/mp4'
+      },
+      options: {}
+    }
+  });
+  const vm: any = wrapper.vm;
+  vm.play();
+  vm.pause();
+  vm.stop();
+  vm.muted();
+  vm.unmuted();
+  expect(wrapper.emitted('pause')).toHaveLength(1);
+});

src/packages/__VUE/video/demo.vue

@@ -29,11 +29,21 @@
       <nut-video :source="source1" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
     <nut-button type="primary" class="m-b" @click="changeVideo">{{ translate('title6') }}</nut-button>
+    <h4>{{ translate('title7') }}</h4>
+    <nut-cell class="cell">
+      <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+      </nut-video>
+    </nut-cell>
+    <nut-button type="success" class="m-b" @click="videoRef.play()">{{ translate('title8') }}</nut-button>
+    <nut-button type="warning" class="m-b" @click="videoRef.pause()">{{ translate('title9') }}</nut-button>
+    <nut-button type="danger" class="m-b" @click="videoRef.stop()">{{ translate('title10') }}</nut-button>
+    <nut-button type="success" class="m-b" @click="videoRef.muted()">{{ translate('title11') }}</nut-button>
+    <nut-button type="danger" class="m-b" @click="videoRef.unmuted()">{{ translate('title12') }}</nut-button>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+import { reactive, toRefs, defineComponent, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('video');
 
@@ -47,7 +57,13 @@ const initTranslate = () =>
       title3: '视频封面海报设置',
       title4: '行内播放',
       title5: '设置视频为背景图',
-      title6: '视频切换'
+      title6: '视频切换',
+      title7: 'Ref控制播放，暂停，结束，静音，取消静音',
+      title8: '播放',
+      title9: '暂停',
+      title10: '结束',
+      title11: '静音',
+      title12: '取消静音'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -56,7 +72,13 @@ const initTranslate = () =>
       title3: 'Video cover poster settings',
       title4: 'play inline',
       title5: 'Set video as background',
-      title6: 'Video switching'
+      title6: 'Video switching',
+      title7: 'Ref Control play, pause, stop, muted, unmuted',
+      title8: 'play',
+      title9: 'pause',
+      title10: 'stop',
+      title11: 'muted',
+      title12: 'unmuted'
     }
   });
 export default defineComponent({
@@ -102,14 +124,14 @@ export default defineComponent({
         loop: true
       }
     });
+    const videoRef = ref('null') as Ref;
     const play = (elm: any) => console.log('play', elm);
     const pause = (elm: any) => console.log('pause', elm);
     const playend = (elm: any) => console.log('playend', elm);
     const changeVideo = () => {
       state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
     };
-
-    return { play, pause, playend, ...toRefs(state), changeVideo, translate };
+    return { play, pause, playend, ...toRefs(state), changeVideo, translate, videoRef };
   }
 });
 </script>

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

@@ -254,6 +254,44 @@ Reset the video when the video address changes
 
 :::
 
+### Ref Control play, pause, stop, muted, unmuted
+
+:::demo
+
+```html
+<template>
+  <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+  </nut-video>
+  <nut-button type="success" class="m-b" @click="videoRef.play();">play</nut-button>
+  <nut-button type="warning" class="m-b" @click="videoRef.pause();">pause</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.stop();">stop</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.muted();">muted</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.unmuted();">unmuted</nut-button>
+</template>
+<script lang="ts">
+  import { toRefs, reactive, ref, Ref } 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 videoRef = ref(null) as Ref;
+      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, videoRef };
+    }
+  };
+</script>
+```
+
 ## API
 
 ### Props
@@ -291,3 +329,13 @@ Reset the video when the video address changes
 | pause   | pause event                                                                           | -                             |
 | playend | Playback completion callback                                                          | -                             |
 | time    | Triggered when playing(current is the current playback time，total is the total time) | (current:string,total:string) |
+
+### Ref
+
+| Event   | Description |
+| ------- | ----------- |
+| play    | play        |
+| pause   | pause       |
+| stop    | stop        |
+| muted   | muted       |
+| unmuted | unmuted     |

src/packages/__VUE/video/doc.md

@@ -254,6 +254,46 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 
 :::
 
+### Ref控制播放，暂停，结束，静音，取消静音
+
+:::demo
+
+```html
+<template>
+  <nut-video ref="videoRef" :source="source" :options="options" @play="play" @pause="pause" @playend="playend">
+  </nut-video>
+  <nut-button type="success" class="m-b" @click="videoRef.play();">播放</nut-button>
+  <nut-button type="warning" class="m-b" @click="videoRef.pause();">暂停</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.stop();">结束</nut-button>
+  <nut-button type="success" class="m-b" @click="videoRef.muted();">静音</nut-button>
+  <nut-button type="danger" class="m-b" @click="videoRef.unmuted();">取消静音</nut-button>
+</template>
+<script lang="ts">
+  import { toRefs, reactive, ref, Ref } 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 videoRef = ref(null) as Ref;
+      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, videoRef };
+    }
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Props
@@ -291,3 +331,13 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 | pause   | 暂停                                               | videoElm                      |
 | playend | 播放完成回调                                       | videoElm                      |
 | time    | 播放时触发(current 为当前播放时间，total 为总时间) | (current:string,total:string) |
+
+### Ref
+
+| 事件名  | 说明     |
+| ------- | -------- |
+| play    | 播放     |
+| pause   | 暂停     |
+| stop    | 结束     |
+| muted   | 静音     |
+| unmuted | 取消静音 |

src/packages/__VUE/video/index.vue

@@ -92,7 +92,7 @@ export default create({
   components: {},
   emits: ['click', 'play', 'pause', 'playend', 'time'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const state = reactive({
       videoElm: null,
       initial: true, //控制封面的显示
@@ -344,6 +344,35 @@ export default create({
       }
     };
 
+    const pause = () => {
+      state.state.playing = false;
+      (state.videoElm as any).pause();
+      emit('pause', state.videoElm as any);
+    };
+
+    const stop = () => {
+      playEnded();
+      (state.videoElm as any).pause();
+    };
+
+    const muted = () => {
+      state.state.isMuted = true;
+      (state.videoElm as any).muted = true;
+    };
+
+    const unmuted = () => {
+      state.state.isMuted = false;
+      (state.videoElm as any).muted = false;
+    };
+
+    expose({
+      play,
+      pause,
+      stop,
+      muted,
+      unmuted
+    });
+
     onMounted(() => {
       init();
     });