5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React Player でロード時に指定位置から動画or音声再生させる方法

Last updated at Posted at 2019-08-26

ページロード時に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で説明しているサイトやドキュメントなく嵌りました。

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?