Question

我使用html和bootstrap创建了一个即将推出的网页。它工作正常，但在视频完全下载后播放我的背景视频。所以我想把它变成一个基于像youtube这样的互联网连接的缓冲视频。这意味着我希望它在下载时自动暂停视频，并在下载视频的下一部分时自动继续。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="author" content="AKASH">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

 <title>test</title>  
<style>
.video-bg{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
.video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
  .video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  .video-bg > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}


</style>
</head> 
  <body>
  <div class="video-bg" style="position:fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;">
  <video autoplay muted loop>
  <source src="http://brosnya.com/video/Final_video.webm" type="video/webm">
  </video></div>
  </body>

jsfiddle-link

我使用了这个视频标记元素。这个代码有任何替代解决方案来制作视频流。

Answer 1

这与video元素本身无关，但与视频文件无关。

原则上， mp4 ， avi 和 mkv 等视频文件最后都有索引文件。这意味着您必须先下载整个文件才能正确播放。因此，您需要做的是重新编码文件并将索引放在开头。

video元素提供的唯一选择恰恰相反。这意味着您可以关闭自动播放和/或打开预加载，以便视频（开头具有索引文件）仅在完全加载时开始播放。

https://www.w3schools.com/tags/tag_video.asp

如何加载我的HTML背景视频作为流媒体视频

1 个答案: