49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { VideoPlayer, Space, Button, VideoViewRef } from '@zhst/meta'
|
|
import { VIDEO_URL } from './mock'
|
|
|
|
export default () => {
|
|
const videoRef = useRef<VideoViewRef>(null)
|
|
const [url] = useState(VIDEO_URL)
|
|
|
|
console.log('videoRef', )
|
|
|
|
return (
|
|
<Space direction='vertical'>
|
|
<Space>
|
|
<Button onClick={() => videoRef.current?.play()}>播放</Button>
|
|
<Button onClick={() => videoRef.current?.pause()}>暂停</Button>
|
|
<Button onClick={() => videoRef.current?.setShowCrop(true)}>截图</Button>
|
|
<Button onClick={() => videoRef.current?.setShowCrop(false)}>退出截图</Button>
|
|
<Button onClick={async () => {
|
|
videoRef.current?.downloadVideoFrame()
|
|
}}>下载截图</Button>
|
|
</Space>
|
|
<div style={{ width: '800px' }}>
|
|
<VideoPlayer
|
|
ref={videoRef}
|
|
url={url}
|
|
showOD
|
|
odList={[
|
|
{
|
|
"id": "123",
|
|
"x": 0.5519352,
|
|
"y": 0.2965385,
|
|
"w": 0.05185461,
|
|
"h": 0.24698898,
|
|
selectAble: false,
|
|
},
|
|
{
|
|
"id": "456",
|
|
"x": 0.58543766,
|
|
"y": 0.3203356,
|
|
"w": 0.052037954,
|
|
"h": 0.2664015
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
)
|
|
}
|