react-player

[shari-sushi]

#25
より、react-playerが使えない可能性が発生。

軽くreadmeを見た感じ、使用方法はほとんど変わらない様子なので、こちらに乗り換え検討。

[shari-sushi]

普通にやると

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

が４つも出てきて、画面を拝むことすら阻まれる。

コード全部

コンポーネント

import React from 'react';
import ReactPlayer from 'react-player/youtube';

type ReactPlayerYoutubeProps = {
  url: string;
  start: number;
};

export const ReactPlayerYoutube: React.FC<ReactPlayerYoutubeProps> = ({ url, start }) => {
  return (
    <ReactPlayer
      url={url}
      controls={true}
      config={{
        playerVars: {
          autoplay: 1,
          start: { start }
        },
      }}
    />
  );
};

////////////////////
type ReactPlayerYoutubeProps2 = {
  url: string;

};

export const ReactPlayerYoutube2: React.FC<ReactPlayerYoutubeProps2> = ({ url }) => {
  return (
    <ReactPlayer
      url={url}
      controls={true}
    />
  );
};

表示ページ

import React, { useContext, useEffect, useState, createContext } from "react"
import Link from "next/link"
import { ReactPlayerYoutube2 } from "@/component/ReactPlayer"

export default function Home() {
    const primaryVideoId = "https://youtu.be/AlHRqSsF--8"
    const [videoId, setVideoId] = useState(primaryVideoId)
    const [start, setStart] = useState(1);
    const url = videoId + "&t=" + start


    // useEffect(() => {

    //     const
    // }, [])
    return (
        <>
            <Link href="/">Home</Link>
            <h1>react-youtube2</h1>
            <div>
                <ReactPlayerYoutube2 url={url} />
                <button onClick={() => setVideoId("https://www.youtube.com/watch?v=zwSRD65SFQI")}>zwSRD65SFQIにセット</button>
                <button onClick={() => setVideoId("https://www.youtube.com/watch?v=48xDoCnkayc")}>48xDoCnkaycにセット</button>

                <br />

                <button onClick={() => setStart(1)}>1秒にセット</button>
                <button onClick={() => setStart(60)}>1分にセット</button>
                <button onClick={() => setStart(300)}>5分にセット</button>
                <br />

                <ReactPlayerYoutube2 url={"https://www.youtube.com/watch?v=48xDoCnkayc&t=1s"} />

            </div>
            <div>
            </div>
        </>
    )
}

Unhandled Runtime Errorはこれで解決した　cookpete/react-player#1474 (comment)

[shari-sushi]

時間設定の件、

is:issue youtube startで検索し、それっぽいの順に読んでる。
やってみたがダメ

1. Youtube configs of start changed after player is ready won't be reflected cookpete/react-player#1614

2. YouTube. SeekTo without starting the playing does not change the image cookpete/react-player#755

     onStart={() => {
     	this.player.seekTo(60)
      this.setState({ playing: false })

の使い方が分からかなかった(画像)

3. YouTube. SeekTo without starting the playing does not change the image cookpete/react-player#755

[shari-sushi]

〆　9426e8f