如何将我的 html 背景视频加载为流媒体视频

Question

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

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

我使用了这个视频标签 element.Is 这个代码有任何替代解决方案来制作视频流。

Answer 1

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

原则上，像mp4、avi和mkv这样的视频文件具有index 文件末尾。这意味着您必须下载整个文件才能正确播放它。所以，你需要做的是 re-encode 文件并将索引放在开头。

video 元素提供的唯一选择恰恰相反。这意味着您可以关闭自动播放 and/or 打开预加载，这样视频（开头有索引文件）只有在完全加载后才会开始播放。

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

如何将我的 html 背景视频加载为流媒体视频

How to load my html background video as a streaming video

html

javascript

jquery

webpage