diff --git a/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap b/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap
index cd73035c05..583aaf0b8e 100644
--- a/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap
+++ b/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`] = `
"
diff --git a/src/packages/__VUE/video/__tests__/video.spec.ts b/src/packages/__VUE/video/__tests__/video.spec.ts
index 0ad1deef3a..f0db79869e 100644
--- a/src/packages/__VUE/video/__tests__/video.spec.ts
+++ b/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('.nut-video source').html()).toContain('xxx.mp4');
+ expect(wrapper.find('.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);
+});
diff --git a/src/packages/__VUE/video/demo.vue b/src/packages/__VUE/video/demo.vue
index dc57507f43..18000cd08a 100644
--- a/src/packages/__VUE/video/demo.vue
+++ b/src/packages/__VUE/video/demo.vue
@@ -29,11 +29,21 @@
{{ translate('title6') }}
+ {{ translate('title7') }}
+
+
+
+
+ {{ translate('title8') }}
+ {{ translate('title9') }}
+ {{ translate('title10') }}
+ {{ translate('title11') }}
+ {{ translate('title12') }}
diff --git a/src/packages/__VUE/video/doc.en-US.md b/src/packages/__VUE/video/doc.en-US.md
index 107bc4cc83..4f734a4924 100644
--- a/src/packages/__VUE/video/doc.en-US.md
+++ b/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
+
+
+
+ play
+ pause
+ stop
+ muted
+ unmuted
+
+
+```
+
## 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 |
diff --git a/src/packages/__VUE/video/doc.md b/src/packages/__VUE/video/doc.md
index f241b40d43..06a9200ffc 100644
--- a/src/packages/__VUE/video/doc.md
+++ b/src/packages/__VUE/video/doc.md
@@ -254,6 +254,46 @@ playsinline 属性设置移动端视频行内播放,阻止新打开页面播
:::
+### Ref控制播放,暂停,结束,静音,取消静音
+
+:::demo
+
+```html
+
+
+
+ 播放
+ 暂停
+ 结束
+ 静音
+ 取消静音
+
+
+```
+
+:::
+
## API
### Props
@@ -291,3 +331,13 @@ playsinline 属性设置移动端视频行内播放,阻止新打开页面播
| pause | 暂停 | videoElm |
| playend | 播放完成回调 | videoElm |
| time | 播放时触发(current 为当前播放时间,total 为总时间) | (current:string,total:string) |
+
+### Ref
+
+| 事件名 | 说明 |
+| ------- | -------- |
+| play | 播放 |
+| pause | 暂停 |
+| stop | 结束 |
+| muted | 静音 |
+| unmuted | 取消静音 |
diff --git a/src/packages/__VUE/video/index.vue b/src/packages/__VUE/video/index.vue
index bc6d55b600..1572f12fb9 100644
--- a/src/packages/__VUE/video/index.vue
+++ b/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();
});