CODEWITHSUNDEEP
javascriptjqueryhtml
akash
akash

Reputation: 793

How to load my html background video as a streaming video

i created a coming soon webpage using html and bootstrap.It works fine but it plays my background video after video fully downloaded. so i want to make it like a buffering video based on a internet connectivity like youtube.That means i want it to auto pause the video when downloading and continue automatically when downloads a next part of the video.

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

i used this video tag element.Is there any alternative solution for this code to make a video streaming.

Upvotes: 1

Views: 2947

Answers (1)

Ted
Ted

Reputation: 4067

This has nothing to do with the video element itself but with the video file.

In principle, video files like mp4, avi and mkv have the index file at the end. That means that you have to download the entire file before being able to play it correctly. So, what you need to do is re-encode the file and place the index at the beginning.

The only option that the video element offers, is quite the opposite. Meaning that you can turn autoplay off and/or turn preload on so that the video (that has the index file at the beginning) will only start playing when its fully loaded.

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

Upvotes: 2

Related Questions