You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.8 KiB
128 lines
2.8 KiB
import {BaseEventOrig, Video, VideoProps} from "@tarojs/components";
|
|
import {HVideoOptions} from "@/components/video/type";
|
|
import Taro from "@tarojs/taro";
|
|
import {FC, useState} from "react";
|
|
import unique_ident from "@/hooks/unique_ident";
|
|
import videoEvents from "@/hooks/videoEvents";
|
|
|
|
const deviation: number = 1
|
|
const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
|
|
let video: Taro.VideoContext
|
|
const [currentTime, setCurrentTime] = useState(0)
|
|
|
|
try {
|
|
video = Taro.createVideoContext('myVideo')
|
|
videoEvents.onSetVideoState(({name}) => {
|
|
switch (name) {
|
|
case "pause":
|
|
video?.pause()
|
|
break
|
|
case "play":
|
|
video?.play()
|
|
break
|
|
}
|
|
})
|
|
} catch (e) {
|
|
}
|
|
|
|
function onTimeUpdate(event: BaseEventOrig<VideoProps.onTimeUpdateEventDetail>) {
|
|
const time = event.detail.currentTime
|
|
|
|
/** 前进回退 */
|
|
if (!opt.preview) {
|
|
if (currentTime + deviation < time) {
|
|
video?.seek(currentTime)
|
|
return
|
|
}
|
|
}
|
|
|
|
setCurrentTime(time)
|
|
|
|
/** 判断是否进入断点 */
|
|
opt.breakpoint.forEach(d => {
|
|
if (time < d + deviation && time > d - deviation) {
|
|
video?.pause()
|
|
video?.seek(d - deviation)
|
|
if (process.env.TARO_ENV === 'h5') {
|
|
try {
|
|
document?.exitFullscreen().then()
|
|
} catch (e) {
|
|
}
|
|
}
|
|
video?.exitFullScreen()
|
|
opt.onBreakpoint(d)
|
|
return
|
|
}
|
|
})
|
|
}
|
|
|
|
opt.setTime((time?: number) => {
|
|
if (typeof time === 'number') {
|
|
video?.seek(time)
|
|
}
|
|
video?.play()
|
|
})
|
|
|
|
function onEnded() {
|
|
if (currentTime + 1 > opt.duration) {
|
|
opt.onEnded()
|
|
} else {
|
|
video?.seek(currentTime)
|
|
unique_ident.remove()
|
|
video?.play()
|
|
}
|
|
}
|
|
|
|
function onPlay() {
|
|
videoEvents.videoState('play')
|
|
}
|
|
|
|
function onPause() {
|
|
videoEvents.videoState('pause')
|
|
}
|
|
|
|
Taro.useDidHide(() => {
|
|
video?.pause()
|
|
unique_ident.put(Number(currentTime.toFixed(2)), Date.now())
|
|
})
|
|
|
|
|
|
Taro.useDidShow(() => {
|
|
if (!video) {
|
|
video = Taro.createVideoContext('myVideo')
|
|
if (currentTime && currentTime < opt.duration - deviation) {
|
|
video.play()
|
|
}
|
|
}
|
|
})
|
|
|
|
Taro.useUnload(() => {
|
|
unique_ident.put(undefined, currentTime)
|
|
unique_ident.upload().then()
|
|
})
|
|
|
|
|
|
return (
|
|
<>
|
|
<Video
|
|
id={'myVideo'}
|
|
autoplay
|
|
enablePlayGesture
|
|
autoPauseIfOpenNative
|
|
vslideGestureInFullscreen
|
|
showCenterPlayBtn
|
|
style={{width: '100%', height: '100%', position: "relative"}}
|
|
poster={opt?.poster || ''}
|
|
src={opt.src}
|
|
enableProgressGesture={opt.preview}
|
|
direction={90}
|
|
onTimeUpdate={onTimeUpdate}
|
|
onEnded={onEnded}
|
|
onPlay={onPlay}
|
|
onPause={onPause}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default HVideo
|
|
|