ページロード時にYoutubeの ?t=
みたいな感じで、指定の秒数から再生を始めるページの実装を想定しています。
React Playerというわりと利用ダウンロード数が高いコンポーネント採用し動画再生の実装しています。
React Player内で用意されている
seekTo関数を使うことで指定位置から再生可能みたいです。。
seekTo=
適当なイベント発生時にseekTo(位置(秒指定))をよぶことでジャンプ可能なかんすう。
コンポーネント生成時かプロパティに突っ込む方法で模索
export class VideoQiitaPage extends Component<Props, State> {
player: ReactPlayer | undefined;
ref = (player:ReactPlayer) => {
this.player = player;
this.movePosition();
}
movePosition(position : number) {
let aaa: any = { type: 'seconds' };
if (this.player){
this.player.seekTo(position);
}
}
render() {
return (
<React.Fragment>
<ReactPlayer
ref={this.ref}
url={'http://xn--hhro09bn9j8uh.com/movie/94neco/neco02_720.mp4'}
controls
/>
むつかしいことではないですが、、、
サンプルや詳細をTypeScriptで説明しているサイトやドキュメントなく嵌りました。