NextJs -允许视频播放器组件使用回退链接
NextJs -允许视频播放器组件使用回退链接
提问于 2022-09-14 15:12:31
我的目标是启用NextJS应用程序的两个视频播放器组件，在没有互联网连接的情况下，通过npm在本地机器上运行时访问和播放视频。
目前，这两个组件..。
<HoverVideoPlayer videoSrc={item.videolink} pausedOverlay={ <img src={item.thumb} alt="Lorem Ipusm" />和
<ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100"
{...props} url={videoLink} poster="images/330163_C2B_Clean.png">
</ReactPlayer>通过具有在线链接的数组填充...are，如：
videolink: "https://cdn.jwplayer.com/videos/D44SzAxa-1AR7TaNs.mp4",我希望使用本地回退链接扩展数组，以防应用程序在没有internet访问的情况下本地运行，例如：
videoLinkOffline: "../../videos/general/31930117_LF.mp4",当外部联机链接不可用时，如何将两个组件设置为从附加的本地链接源中提取？
回答 1
Stack Overflow用户
发布于 2022-09-14 22:08:27
这些是第三方组件吗？如果是的话，我会问他们的社区。
如果只使用<video>，则AFAIK没有回退本地链接选项。您需要编写回退逻辑。我头顶上的东西：
const link = "https://youtube.com";
const fallback = "../localvideo.mp4"
const [checking, setChecking] = useState(true) // don't display video player until we're done checking
const [isOnline, setIsOnline] = useState(false)
useEffect(async () => {
try {
await axios.get(link)
setIsOnline(true)
} catch { // Axios throws on statuses above 300
setIsOnline(false)
} finally {
setChecking(false)
}
}, [])
return !checking && <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100"
{...props} url={isOnline ? link : fallback} poster="images/330163_C2B_Clean.png">
</ReactPlayer>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73719282
复制相关文章
相似问题
腾讯云开发者
