更改useEffect中的视频源基于语言更改

Question

我正在尝试播放关于语言变化的不同视频。但是总是播放相同的视频，

useEffect(() => {
console.log("language changed: ", i18n.language);
vidSrc2.current.setAttribute(
"src",
require(`../assets/video/${i18n.language}/vid.mp4`)
);
window.addEventListener("langChange", () => {
vidSrc2.current.setAttribute(
"src",
require(`../assets/video/${i18n.language}/vid.mp4`)
);
});
}, [i18n.language]);
<video
ref={videoRef2}
style={{
objectFit: "cover",
width: "100vw",
height: window.screen.availHeight === 1080 ? "74vh" : "77vh"
}}
controls
controlsList="nofullscreen nodownload"
preload="true"
disablePictureInPicture
>
<source
ref={vidSrc2}
type="video/mp4"
/>
</video>

任何帮助都将不胜感激。

Answer 1

import {useEffect, useState} from 'react'
import Modal from '../../modal/modal-video'
import router, { useRouter } from "next/router";
const useModal = () => {
const [isShown, setIsShown] = useState<boolean>(false);
const toggle = () => setIsShown(!isShown);
return {
isShown,
toggle,
};
};
const PlayBtn = () => {
const { isShown, toggle } = useModal();
const [video, setVideo ] = useState('');
const [title, setTitle] = useState('')
const router = useRouter()
useEffect(() => {
if(router.locale == 'nl-BE'){
const url = "/video/nl.mp4"
setTitle("Test in Dutch")
setVideo(url)
}else if (router.locale == 'en-US'){
const url = "/video/eng.mp4"
setTitle("Test in English")
setVideo(url)
}else {
const url = "/video/fr.mp4"
setTitle("Test in French")
setVideo(url)
}
})

return(
<>
<div className="h-28 w-28 bg-white rounded-full playBtn mt-20 md:mt-0">
<button type="button" onClick={toggle}><img src="../../img/play-button.png" alt="" /></button>
</div>
<Modal 
isShown={isShown}
hide={toggle}
headerText={title}
modalContent={
<iframe width="100%" height="100%"
src={video}>
</iframe>
}
/>
</>
)
}
export default PlayBtn

我就是这样做的。我使用useState并使用router.locale检查当前选择的区域设置。

您甚至可以在setVideo('/video/nl.mp4'(中设置src，而无需使用常量url。