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 = ({ url, start }) => { return ( ); }; //////////////////// type ReactPlayerYoutubeProps2 = { url: string; }; export const ReactPlayerYoutube2: React.FC = ({ url }) => { return ( ); }; ``` 表示ページ ``` 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 ( <> Home

react-youtube2

setVideoId("https://www.youtube.com/watch?v=zwSRD65SFQI")}>zwSRD65SFQIにセット setVideoId("https://www.youtube.com/watch?v=48xDoCnkayc")}>48xDoCnkaycにセット
setStart(1)}>1秒にセット setStart(60)}>1分にセット setStart(300)}>5分にセット

) } ```

Unhandled Runtime Errorはこれで解決した　https://github.com/cookpete/react-player/issues/1474#issuecomment-1179516802

[shari-sushi]

時間設定の件、

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

1. https://github.com/cookpete/react-player/issues/1614

2. https://github.com/cookpete/react-player/issues/755

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

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

3. https://github.com/cookpete/react-player/issues/755

[shari-sushi]

〆　https://github.com/sharin-sushi/0015Laboratory/pull/27/commits/9426e8fe71c5d0a4ed36d2dc49ee366b21c103ab