preloader
post-thumb

Last Update: February 20, 2025


BYauthor-thumberic


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
post-thumb

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
post-thumb

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.

agico

We transform visions into reality. We specializes in crafting digital experiences that captivate, engage, and innovate. With a fusion of creativity and expertise, we bring your ideas to life, one pixel at a time. Let's build the future together.

Copyright ©  2025  TYO Lab