youtube player with { playerVars: { start }, don't start on that time #1725
Description
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
- codeing (use long movies url.)
- npm run dev
- 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を使う方法が分からなかったから試していないけど…
僕は非英語ネイティブだよ。
もし間違いに気がついたら指摘してもらえると嬉しい。