HTML video does not show-CodePudding

I tried the simplest example on Chrome:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>.</title>
    <link rel="shortcut icon" href="surprise.png" type="image/x-icon">
    <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
    <div class="overlay" id="overlay">
        <div class="body">
            <h2 class="bodytitle">Click "Yes"!</h2>
            <div class="bodybutton">
                <button id="accept-button" class="button">Yes</button><br>
                <button id="decline-button" class="button1">No</button>
            </div>
        </div>
    </div>
    <div class="video">
        <video id="video" class="scare" loop="" src="video.mp4">
    </div>

    <script src="/styles/style.js"></script>
</body>
</html>

I tried this on Chrome, it didn't show the video, and the console doesn't show any errors. Any answers?

CodePudding user response：

You can try this :

<video id="video" class="scare" loop="" src="video.mp4" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.mp4" type="video/ogg">
</video>

CodePudding user response：

You need to set the video type because sometime