react-youtube

[shari-sushi]

react-youtubegit.hub

startパラメーターを操作しても動画の再生開始時間が別のものに上書きされる。 このままではこのコンポーネントを使っている意味がない。

※startパラメーターについて YouTube：IFrame Player API YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

start このパラメータを指定すると、動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。パラメータ値は正の整数です。seekTo 関数と同様に、プレーヤーは指定された時間に最も近いキーフレームを探します。そのため、リクエストされた時間の直前から再生が開始される場合もありますが、ずれは通常、最大で 2 秒程度です。

[shari-sushi]

もう１年半も開発してないっぽい(最終が'22年7月)

より活発でstarが多い、react-playerなるものがあった。 こっちに乗り換えるか検討。#26

[shari-sushi]

型エラーどうしたら良いか分からなかったからとりあえずanyにして試験してたけど、 ポートフォリオの自分の履歴が助けてくれた。はっぴー。 npm install @types/youtube --save-dev

[shari-sushi]

youtube urlの 特性メモ

https://x.com/sharin_prog/status/1684267983911411712?s=20

[shari-sushi]

そもそも過去に同じ問題に１回ぶつかって、解消してたよなっていう。 問題なかった頃↓

https://gyazo.com/fa3b5448e3c7cd2f96f8a66e643e59ab

[shari-sushi]

過去のコミット(10/16, 10/21, 11月の3つ)のコードを取得して動作確認したが、全てにおいて同様の現象が見られた。 よって、コード外に原因がある可能性が高まった。

[shari-sushi]

進捗

---

これで時間セット(かつ自動再生開始)できる。 ただ、event.target.seekTo(this.props.time);の有無は挙動に影響しない なのに、onRaedyそのものをコメントアウトすると時間セットできなくなる謎

    onReady = (event: { target: any }) => {
        this.setState({
            player: event.target,
        });
        event.target.playVideo();
        // event.target.seekTo(this.props.time);
    };

---

componentDidUpdate(prevProps: YouTubePlayerProps) { と changeTime = (time: number) => { の両方にthis.state.player.seekTo(time); が無いと、動画再生中に時間セット(操作)できない。 謎仕様…

---

• 初期動画は自動再生はされない
• 同じ動画内で時間セット→期待通りの挙動
• 別の動画に遷移→自動再生はするが、定期した問題(時間が上書きされる)が発生。

コード全体

``` import React, { useContext, useEffect, useState, createContext } from "react" import Link from "next/link" export default function Home() { const [videoId, setVideoId] = useState("2T4kKYAJrAM") const [start, setStart] = useState(0); console.log(start) const settinghandler = () => { setVideoId("wBjhxyFU3EY") setStart(30) } return ( <> Home

react-youtube3

use seekTo, commponentDidUpdate

{/* 再生始まらない*/} { setVideoId("zwSRD65SFQI"); setStart(0); }}>zwSRD65SFQIの0秒にセット setVideoId("48xDoCnkayc")}>48xDoCnkaycにセット setVideoId("2T4kKYAJrAM")}>2T4kKYAJrAMにセット
時間をセット： setStart(0)}>0秒 setStart(60)}>1分 setStart(300)}>5分

ボタンじゃなくてリンクが良い
settinghandler()}>wBjhxyFU3EYの30秒にセット

memo

再生中に時間操作→ok: urlは同じなら操作しても大丈夫

別動画にする→NG: 繊維するも再生されず、手動で再生すると時間が別もの。

別動画かつ時間指定→NG: 再生止まり、手動で再生すると時間が別もの。

動画遷移、時間操作→時間操作時に自動さいせいされるが、別の時間になる。

動画遷移時に自動再生させる必要がある。

) } import YouTube from 'react-youtube'; type YouTubePlayerProps = { videoId: string; time: number; } interface YouTubePlayerState { player: any; } class YouTubePlayer extends React.Component { private playerRef: React.RefObject; constructor(props: YouTubePlayerProps) { console.log("props.time (super前)", props.time) console.log("props.time", props.time) console.log("props.videoId", props.videoId) super(props); //親クラスのコンストラクタを呼び出せる。 // 結果として、propsを初期化するので、Reactコンポーネントのthis.propsプロパティを使える。 console.log("props (super後)", props) this.state = { player: null, }; this.playerRef = React.createRef(); } // renderメソッドよりも後で呼び出される componentDidMount() { if (this.state.player && this.props.time) { this.state.player.playVideo(); // this.state.player.seekTo(this.props.time); } // this.state.player.event.onReady() } // renderメソッドよりも後で呼び出される componentDidUpdate(prevProps: YouTubePlayerProps) { if (prevProps.time !== this.props.time) { this.changeTime(this.props.time); } } onReady = (event: { target: any }) => { this.setState({ player: event.target, }); event.target.playVideo(); // event.target.seekTo(this.props.time); }; changeTime = (time: number) => { console.log('seeking to: ' + time); if (this.state.player) { this.state.player.playVideo(); this.state.player.getPlayerState(1) // this.state.player.seekTo(time); //あっても挙動に違い見られず } }; render() { const { videoId } = this.props; console.log("this.props", this.props) const opts: any = { width: '560', height: '315', playerVars: { // https://developers.google.com/youtube/player_parameters autoplay: 1, //自動再生に必須だが、これだけだとダメな時もある…？。 // start: start, //時間が上書きされるため使用ダメ絶対 controls: 1, }, }; return (

); } }

[shari-sushi]

https://github.com/tjallingt/react-youtube/issues/52

[shari-sushi]

妥協案１ 単純なdelay（上述）

妥協案２ 現状のurlを確認し、 ①同じならseekTo ➁違うなら動画遷移→onReadyでdelay(短め)→seekTo

２の方が快適な気がする ↓ 2は無理だった