Is there any best practices for using next-video play remote videos without any optimizations?

[LikeDreamwalker]

For my scenario, I need to play some videos on our app, which must be stored in our cloud services. So I have to use next-video with a pure remote video string link like below:

import BackgroundVideo from "next-video/background-video";
import Player from "next-video/player";
export default function VideoCard() {
  return (
    <>
      <BackgroundVideo
        disableTracking
        src="https://opensora.tos-cn-beijing.volces.com/frontend_static_resources/%E7%A4%BA%E4%BE%8B%E7%94%A8%E8%A7%86%E9%A2%91/gallery/sample_0000.mp4?X-Tos-Algorithm=TOS4-HMAC-SHA256&X-Tos-Content-Sha256=UNSIGNED-PAYLOAD&X-Tos-Credential=AKTP0UlTRFG0oXEC5o1EPKzDNWwYOJ7Tpzwl7uF86gid6o%2F20240717%2Fcn-beijing%2Ftos%2Frequest&X-Tos-Date=20240717T104735Z&X-Tos-Expires=3600&X-Tos-SignedHeaders=host&X-Tos-Security-Token=nCgdqdEROend3.ChsKBzNzX056d3cSEG_n3bvyyEuFozx9CFODiEIQusLetAYYyt7etAYgo_O66QcoAjCZssgOOgZ5dWFueWlCA3Rvc1IGeXVhbnlpWAJgAQ.a-2aaNPpFiReCJd576w2orVd-z7ZprkRXFP8Vf2v2HdrRXGR6rmZ6TXRS6pop572dSOcf4raZ1FD60NS_2X2HA&X-Tos-Signature=15bda655c08f87691ff9380c068ad403911ad987932d11b8d014e40fa24b5ce7"
      >
        <h1>next-video</h1>
        <p>
          A React component for adding video to your Next.js application. It
          extends both the video element and your Next app with features for
          automatic video optimization.
        </p>
      </BackgroundVideo>
      <Player src="https://opensora.tos-cn-beijing.volces.com/frontend_static_resources/%E7%A4%BA%E4%BE%8B%E7%94%A8%E8%A7%86%E9%A2%91/gallery/sample_0000.mp4?X-Tos-Algorithm=TOS4-HMAC-SHA256&X-Tos-Content-Sha256=UNSIGNED-PAYLOAD&X-Tos-Credential=AKTP0UlTRFG0oXEC5o1EPKzDNWwYOJ7Tpzwl7uF86gid6o%2F20240717%2Fcn-beijing%2Ftos%2Frequest&X-Tos-Date=20240717T104735Z&X-Tos-Expires=3600&X-Tos-SignedHeaders=host&X-Tos-Security-Token=nCgdqdEROend3.ChsKBzNzX056d3cSEG_n3bvyyEuFozx9CFODiEIQusLetAYYyt7etAYgo_O66QcoAjCZssgOOgZ5dWFueWlCA3Rvc1IGeXVhbnlpWAJgAQ.a-2aaNPpFiReCJd576w2orVd-z7ZprkRXFP8Vf2v2HdrRXGR6rmZ6TXRS6pop572dSOcf4raZ1FD60NS_2X2HA&X-Tos-Signature=15bda655c08f87691ff9380c068ad403911ad987932d11b8d014e40fa24b5ce7"></Player>
    </>
  );
}

And the pretty weird thing is, for the BackgroundVideo, it will request MUX services in the loop (api/video, and when I try to add it as what document says, it will redirect to the MUX services), but I think it should request no more other remote services by document says it can be used without any optimization. And for using the Player only, for this video I will got an issue for loading it, but BackgroundVideo can load it only with the request issues.

I might have missed something, or maybe just next-video is not designed to be used this way. Waiting for help and this is a pretty important function for our app.

[luwes]

you're right to use the next-video/player or next-video/background-player https://github.com/muxinc/next-video#player-only-demo

it's possible the player doesn't recognize the video type because the URL doesn't end in .mp4. could you try adding &ext=.mp4 to the end of the URL?

[LikeDreamwalker]

you're right to use the next-video/player or next-video/background-player https://github.com/muxinc/next-video#player-only-demo

it's possible the player doesn't recognize the video type because the URL doesn't end in .mp4. could you try adding &ext=.mp4 to the end of the URL?

I think this might be related to the sign that ended in the link, which is needed for the cloud service; thanks for the reply, and I will close this issue for now. But for the BackgroundVideo, it will request to MUX and trying to upload it or something, I haven't figure out why, might be related to the config work.