|
|
@ -9,17 +9,21 @@ import unfull from "@/static/img/exitFullscreen.png" |
|
|
|
|
|
|
|
|
|
|
|
type Props = { |
|
|
|
type Props = { |
|
|
|
src: string |
|
|
|
src: string |
|
|
|
onRef: any |
|
|
|
onRef?: any |
|
|
|
|
|
|
|
showFull?: boolean |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const VideoPro:FC<Props> = ({src,onRef}) => { |
|
|
|
const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(onRef){ |
|
|
|
//用useImperativeHandle暴露一些外部ref能访问的属性
|
|
|
|
//用useImperativeHandle暴露一些外部ref能访问的属性
|
|
|
|
useImperativeHandle(onRef, () => { |
|
|
|
useImperativeHandle(onRef, () => { |
|
|
|
return { |
|
|
|
return { |
|
|
|
func: pause, |
|
|
|
func: pause, |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 视频ui控制需要的响应式数据
|
|
|
|
// 视频ui控制需要的响应式数据
|
|
|
|
const videoContext = useRef<any>() |
|
|
|
const videoContext = useRef<any>() |
|
|
@ -178,16 +182,16 @@ const VideoPro:FC<Props> = ({src,onRef}) => { |
|
|
|
<Icon name="pause" color="#fff" size="23px" onClick={() => {videoContext.current.pause();setIsPlay(false)}} /> : |
|
|
|
<Icon name="pause" color="#fff" size="23px" onClick={() => {videoContext.current.pause();setIsPlay(false)}} /> : |
|
|
|
<Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} /> |
|
|
|
<Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} /> |
|
|
|
} |
|
|
|
} |
|
|
|
<Text className="text-white pl-1 font-26">{process_duration}</Text> |
|
|
|
<Text className="text-white pl-2 font-26">{process_duration}</Text> |
|
|
|
<View style={{flex:'1'}}> |
|
|
|
<View style={{flex:'1'}}> |
|
|
|
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider> |
|
|
|
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<Text onClick={() => { |
|
|
|
<Text className="text-white font-26 pr-2">{total_duration}</Text> |
|
|
|
isFull?videoContext.current.exitFullScreen():videoContext.current.requestFullScreen({direction:90}) |
|
|
|
{ showFull && |
|
|
|
}} className="text-white font-26 pr-1">{total_duration}</Text> |
|
|
|
<> |
|
|
|
{ |
|
|
|
{isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} /> |
|
|
|
isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} /> |
|
|
|
: <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}} />} |
|
|
|
: <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}} /> |
|
|
|
</> |
|
|
|
} |
|
|
|
} |
|
|
|
</> |
|
|
|
</> |
|
|
|
} |
|
|
|
} |
|
|
|