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 + + +``` + ## 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(); });