next.js undured（在承诺中）脱颖而出：该元素没有播放视频的支持资源

发布于 2025-02-03 06:47:57 字数 1468 浏览 3 评论 0 原文

在next.js应用中，我成功获取视频URL，并希望在我的应用中渲染它们，但要获得此错误：“ used（in Promise）domexception：该元素没有支持的来源”

我设置了一个视频元素

 <video
        loop
        onClick={onVideoPress}
        ref={videoRef}
        src={url}
        style={{ objectFit: "cover" }}
      />

，这就是参考：

   const videoRef = useRef(null);

这是单击处理程序：

const onVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };

这是Chrome Tools显示的源错误：

i包装 videorf.current.play（）; with try/catch 但我有同样的错误：

我尝试了此：

  if（videoref.current！== null）{
      videoref.current
        。玩（）
        。然后（（）=＆gt; {
          设定（true）;
        }））
        .catch（（e）=＆gt; {
          Console.Error（“播放视频中的eror”，e）；
        }）;
    }

仍然存在相同的问题

并在视频元素上添加 crossorigin =“ Anonymous” ，但是当我单击视频组件时

， videoref.current 更改为：

原文

In next.js app I fetch video urls successfully and want to render them in my app but getting this error: "Uncaught (in promise) DOMException: The element has no supported sources"

I set a video element

 <video
        loop
        onClick={onVideoPress}
        ref={videoRef}
        src={url}
        style={{ objectFit: "cover" }}
      />

this is ref:

   const videoRef = useRef(null);

this is the click handler:

const onVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };

this is the source error that chrome tools show:

I wrapped videoRef.current.play(); with try/catch but i got same error:

I tried this:

 if (videoRef.current !== null) {
      videoRef.current
        .play()
        .then(() => {
          setPlaying(true);
        })
        .catch((e) => {
          console.error("eror in play video", e);
        });
    }

and add crossorigin="anonymous" on video element but still have the same issue

When I click on the video component, videoRef.current changes to: