forked from Gitlink/forgeplus-react
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import React, { useEffect, useState, Fragment } from "react";
|
|
import "../../../node_modules/video-react/dist/video-react.css";
|
|
import {
|
|
Player,
|
|
ControlBar,
|
|
PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
|
|
ReplayControl, // 后退按钮
|
|
ForwardControl, // 前进按钮
|
|
CurrentTimeDisplay,
|
|
TimeDivider,
|
|
PlaybackRateMenuButton, // 倍速播放选项
|
|
VolumeMenuButton,
|
|
BigPlayButton,
|
|
} from "video-react";
|
|
function videos(video_url) {
|
|
const [VideUrl, setUrl] = useState(null); //用户的内容
|
|
useEffect(() => {
|
|
setUrl(video_url);
|
|
}, []);
|
|
|
|
return (
|
|
<Fragment>
|
|
<div style={{ width: "100%", maxHeight: 500 }}>
|
|
<Player>
|
|
<source src={VideUrl} />
|
|
<BigPlayButton position="center" />
|
|
<ControlBar autoHide={false} disableDefaultControls={false}>
|
|
<ReplayControl seconds={10} order={1.1} />
|
|
<ForwardControl seconds={30} order={1.2} />
|
|
<PlayToggle />
|
|
<CurrentTimeDisplay order={4.1} />
|
|
<TimeDivider order={4.2} />
|
|
<PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
|
|
<VolumeMenuButton />
|
|
</ControlBar>
|
|
</Player>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
export default videos;
|