I have a React web application where I’m trying to display a .mp4 video. My current setup looks like this:
<div className="title-main-cont">
<div className="video-wrapper">
<video
ref={videoRef}
className="background-video"
autoPlay
loop
muted
playsInline
onLoadedData={() => console.log('Video loaded successfully')}
>
<source src="https://imgur.com/vRoSLuO.mp4" type="video/mp4" />
{/* <source src="https://imgur.com/D7pgE1Z.mp4" type="video/mp4" /> */}
Your browser does not support the video tag.
</video>
The issue I’m encountering is that when I upload the video to Imgur, which is originally 3180×2160, it gets resized to 800×600. This is quite frustrating as I need to display the video in its full resolution.
Do you have any recommendations on where to store/host the video so that it maintains its full size, yet doesn’t take too long to load when the page is rendered? Any advice on balancing video quality and load time would be greatly appreciated.
4
Self hosted it, serving it as rest from a django app
class ServeVideoAPIView(APIView):
def get(self, request):
video_path = os.path.join(settings.MEDIA_ROOT, 'animated-wallp.mp4')
if os.path.exists(video_path):
return FileResponse(open(video_path, 'rb'), content_type='video/mp4')
else:
return Response({"error": "Video file not found"}, status=status.HTTP_404_NOT_FOUND)
```