Last Update: February 20, 2025
BY
eric
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!
Latest Articles
Building Your Own AI Rig: More Memory, More Power
March 3, 2025
Exploring the Best Free and Open-Source Chat UIs for LLMs
February 28, 2025
Previous Article
Feb 20, 2025
Exploring AI Video Generation: What KlingAI, Runway, Pika Labs, Luma, Sora, and HailuoAI Offer
In this post, I will show you what KlingAI, Runway, Pika Labs, Luma, Sora, and HailuoAI offer in the field of AI video generation.
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.