Question

我正在创建一个基于视频的网站，作为遇到问题的首页背景，我不知道问题出在哪里，但我遵循了在线教程，看来我愿意放在我的网站上已显示但无法播放，并且即使以全屏查看也太大了。

代码如下：

<html>
<head>
    <!-- settings -->
    <title> Prestige</title>
    <link rel="shortcut icon" type="image/png" href="images/favicon.png"
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" conetent="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
</head>
<body>
    <header class="v-header container">
        <div class="fullscreen-video-wrap">
            <video src="Intro.mp4" autoplay="true" loop="true"></video>
        </div>
    </header>
</body>

Answer 1

如果您的视频对您的页面来说太大了-> 您可以使用width和height属性来调整视频的大小。例如：

<video src="Sample.mp4" width="320" height="240">

如果您认为视频的存储空间过大-> 尝试压缩视频或使用embed标签嵌入。您也可以尝试将浏览器更新为最新版本。

Answer 2

您可以尝试将您的代码上传到代码片段中以进行复制，然后查看代码是否存在问题。您可以尝试以下代码：

HTML

<video autoplay muted loop id="myVideo">
    <source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum...</p>
    <!-- Use a button to pause/play the video with JavaScript -->
    <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

CSS：

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}

JS

<script>
// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
    if (video.paused) {
        video.play();
        btn.innerHTML = "Pause";
    } else {
        video.pause();
        btn.innerHTML = "Play";
    }
}
</script>

您也可以选中此here。

视频无法播放，并且太大

2 个答案: