Javascript 如何将html背景视频加载为流式视频_Javascript_Jquery_Html_Webpage

Javascript 如何将html背景视频加载为流式视频

javascript jquery html

Javascript 如何将html背景视频加载为流式视频,javascript,jquery,html,webpage,Javascript,Jquery,Html,Webpage,我用html和bootstrap创建了一个即将到来的网页。它工作得很好，但在视频完全下载后，它会播放我的背景视频。所以我想让它像一个基于互联网连接的缓冲视频，比如youtube。这意味着我想让它在下载时自动暂停视频，并在下载视频的下一部分时自动继续 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com

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


试验
.视频背景{
位置：固定；
顶部：0；右侧：0；底部：0；左侧：0；
溢出：隐藏；
}
.视频背景>视频{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
/* 1. 无对象适配支持：*/
@介质（最小纵横比：16/9）{
.video bg>video{高度：300%；顶部：-100%；}
}
@介质（最大纵横比：16/9）{
.video bg>视频{宽度：300%；左侧：-100%；}
}
/* 2. 如果支持对象匹配，则覆盖（1）：*/
@支架（对象配合：盖）{
.视频背景>视频{
顶部：0；左侧：0；
宽度：100%；高度：100%；
对象匹配：覆盖；
}
}

我使用了此视频标记元素。此代码是否有其他解决方案来制作视频流。

这与

视频

元素本身无关，而是与视频文件有关

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

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

那么你试过什么？你看过YouTube播放器的文档了吗？你提到了YouTube播放器，所以你可以通过嵌入YT和autoplay选项来实现。仅仅因为你需要流式传输你的视频，这个文件似乎太重了——试着通过降低电影分辨率和使用类似video.js的框架创建“海报”来优化