search

shari-sushi / 0015Laboratory

My SandBox, PoC
0 stars 0 forks source link

react-youtube #25

Open shari-sushi opened 7 months ago

shari-sushi commented 7 months ago

react-youtubegit.hub

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

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

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

shari-sushi commented 7 months ago

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

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

shari-sushi commented 7 months ago

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

image

shari-sushi commented 7 months ago

youtube urlの 特性メモ

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

shari-sushi commented 7 months ago

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

https://gyazo.com/fa3b5448e3c7cd2f96f8a66e643e59ab

shari-sushi commented 7 months ago

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

shari-sushi commented 6 months ago

進捗

これで時間セット(かつ自動再生開始)できる。 ただ、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

{/* 再生始まらない*/}
時間をセット：

ボタンじゃなくてリンクが良い
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 commented 6 months ago

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

    shari-sushi commented 6 months ago

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

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

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