youtube player with { playerVars: { start }, don't start on that time

[shari-sushi]

Current Behavior

In youtube player, I specified a playback start time with {playerVars: start}. It would be at that time for a moment, but was immediately overwritten by another time.
That time was probably the continuation of the most recently viewed video.
I uploaded this Current Behavior to youtube because my English is not good.

However, if I delete the youtube Cookie or never watched the video in the first place, this problem does not occur.

Also, I've tried triggering useState with onReady or onStart, but it doesn't work.

(Wouldn't the ideal behavior be to, for example, not load the youtube cache when youtube plays?)

japanese(my origin text)

youtube playerにおいてplayerVars startで再生開始時間を使用した場合、一瞬だけその時間になるが、すぐに別の時間に上書きされる。
おそらく、直近にその動画を見ていた続きの時間だ。
僕は英語が下手だから、この現象をyoutubeにアップロードした。

ただし、youtube Cookieを削除したり、そもそも見たこと無い動画であれば、この問題は発生しない。

また、onReadyやonStartでuseStateを起爆してみたけど、ダメだったよ。

(理想的な振る舞いとして、例えば、youtube再生時にyoutubeのキャッシュを読み込まないようなことはできないだろうか？)

Expected Behavior

Playback from the time specified by you, without being overwritten.

japanese(my origin text)

上書きされずに、自分が指定した時間から再生してほしい。

Steps to Reproduce

1. codeing (use long movies url.)
2. npm run dev
3. access to localhost

my xperimental code

import React, { useContext, useEffect, useState, createContext } from "react"
import Link from "next/link"
import ReactPlayer from 'react-player/youtube';

export default function Home() {
const [start, setStart] = useState(120);
const [url, setUrl] = useState("https://youtu.be/2T4kKYAJrAM?t=886");

const cliclhandler = (url: string, start: number) => {
    setStart(start);
    setUrl(url)
}

return (
    <>
        <Link href="/">Home</Link>
        <h1>react-player/youtube 4</h1>
        <div className="App">
            <Player start={start} url={url} />
            <p>{start} seconds</p>
            <button onClick={() => cliclhandler("https://www.youtube.com/watch?v=k_uDlZN6ypk", 1)}>k_uDlZN6ypk, 0sec</button>
            <button onClick={() => cliclhandler("https://www.youtube.com/watch?v=k_uDlZN6ypk", 300)}>k_uDlZN6ypk, 5min</button><br />
            <button onClick={() => cliclhandler("https://www.youtube.com/watch?v=DREoOy4Q0LU", 1)}>DREoOy4Q0LU, 0sec</button>
            <button onClick={() => cliclhandler("https://www.youtube.com/watch?v=DREoOy4Q0LU", 300)}>DREoOy4Q0LU, 5min</button><br />
            <br />
            startで設定しても、上書きされる（明確な視聴履歴がある場合のみ）
        </div>
    </>
);

}

type Player = {
url: string,
start: number,
}

const Player = ({ url, start }: Player) => {
const [hasWindow, setHasWindow] = useState(false);
useEffect(() => {
if (typeof window !== "undefined") {
setHasWindow(true);
}
}, []);

const [onStartStart, setOnStartStart] = useState(0)

return (
    <>
        {hasWindow &&
            <ReactPlayer
                url={url}
                playing
                controls
                config={{ playerVars: { start: onStartStart } }}
                // onStart={() => setOnStartStart(start)}
                // onReady={() => setOnStartStart(start)}
            />
        }
    </>
);

};

Environment

• URL attempting to play: localhost
• Browser: Opera, Chrome
• Operating system: Windows 10 Home
• other...
  "next": "14.0.2",
  "react": "^18",
  "react-dom": "^18",
  "react-player": "^2.14.1",
  "react-youtube": "^10.1.0"

Supplement

The same phenomenon was seen on react-youtube on another oss (my code).
When we tried seekTo on react-youtube, we were able to manipulate the playback time of the currently playing video. However, it was not possible to manipulate video transition and playback time at the same time.
I haven't tried seekTo in youtube-olayer yet.cuz, i could not understand how to do in react-player...

I'm a non-native English speaker.
If you notice my any mistakes, I'd be happy to have them pointed out.

japanese(my origin text)

同じ現象が別のoss react-youtubeでも確認された。
react-playerではseekToは試していないが、react-youtubeでは結果は対して変わらなかったよ。
自分の知識ではreact-pkayerでseekToを使う方法が分からなかったから試していないけど…

僕は非英語ネイティブだよ。
もし間違いに気がついたら指摘してもらえると嬉しい。

[gangware72]

I am experiencing similar issues

[lakers38]

I am also facing this

[lakers38]

i fixed this by using youtube-nocookie.com instead of youtube.com in my URL, it seems like the youtube user cookies interfere with things

[shari-sushi]

Thank you.
I set that up and it worked!
But I guess that makes youytube get no the viewer's information... That is not my intention, but I guess it can't be helped... Anyway, thanks for remedying a critical bug.

Until you taught me this, this is how I was getting around it.
it is so bad X(

const handleClick = (videoId: string, start: number) => {
    if (currentVideoId == videoId) {
    setStart(start);
    } else {
    setCurrentVideoId(videoId)
    setTimeout(() => setStart(start), 1600)
    }
  };

P.S
I don't think we've solved the root of the problem, so I'll leave the issue open.