Question

我正在使用的背景视频无法正常工作。我不确定是我的代码还是视频。

This是视频。

video#bgvid {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background-size: cover;
}

<video id="bgvid" autoplay>
  <source src="bar.mp4" type="video/mp4">
</video>

Answer 1

您可能会发现这很有用，https://www.youtube.com/watch?v=05ZHUuQVvJM

当我第一次想以视频作为背景时使用了

Answer 2

如果视频路径正确，请检查以下提示。

根据浏览器和系统的不同，您需要在视频代码中添加一些属性。

允许视频在Chrome上自动播放的最常见方法是将mute属性添加到视频代码：

<video id="bgvid" autoplay mute>
 <source src="bar.mp4" type="video/mp4">
</video>

现在允许在iOS上自动播放视频的方法是将playsinline属性添加到video标签：

<video id="bgvid" autoplay mute playsinline>
 <source src="bar.mp4" type="video/mp4">
</video>

您可以在这里Autoplay Policy of Chrome和这里New Policies for iOS处找到帮助。

Answer 3

我认为this howto page in W3Schools很好地说明了您的需求。

万一链接消失了，我也将解决方案嵌入此处（只是更改了视频源路径以使其在此处工作）

// 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";
  }
}

 /* Style the video: 100% width and height to cover the entire window */
#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;
}

 <!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the 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>

我如何播放背景视频

3 个答案: