时间戳

首页 > 解决方案 > 视频无法播放且太大

css - 视频无法播放且太大

问题描述

我正在创建一个基于视频作为主页背景的网站我遇到了一个问题，我不知道问题是什么，但我遵循了一个在线教程，似乎我愿意放入我的视频网站已显示但无法播放，即使全屏查看也太大。

这是代码：

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

标签： csshtml

解决方案

您可以尝试在代码片段中上传您的代码以复制它，看看您的代码是否存在问题。你可以试试这段代码：

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>

你也可以在这里查看。

推荐阅读