
Last Update: February 20, 2025
BYeric
Keywords
I used Sora to create a video and tried to use it in Next.js. However, I ran into an issue where the video wouldn't autoplay as expected. The video is loaded but not being played.
Below was the original code block that I was working on:
export default function Page() {
return (
<div>
<h1>Video</h1>
<video autoplay muted loop>
{/* This is not the video I created with Sora*/}
<source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</div>
);
}
It turned out the solution was so simple, and I only needed to change the autoplay
attribute to autoplay="true"
or literally anything like autoplay="autoplay"
or even autoplay=""
in the video tag.
Here's the updated code block:
export default function Page() {
return (
<div>
<h1>Video</h1>
<video autoplay="true" muted loop>
{/* This is not the video I created with Sora*/}
<source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</div>
);
}
Here is my Video:
Enjoy, and happy coding!
Previous Article

Oct 03, 2021
Setting up Ingress for a Web Service in a Kubernetes Cluster with NGINX Ingress Controller
A simple tutorial that helps configure ingress for a web service inside a kubernetes cluster using NGINX Ingress Controller
Next Article

Feb 08, 2025
Creating Celebrity Look-Alike Images with Stable Diffusion
In this tutorial, we will explore the steps required to create celebrity look-alike images with Stable Diffusion.