Creating blobs faster for video streaming

Question

I am new to js. I will try to put my problem as clear as possible. I want to stream local video on browser localhost and also be able to seek and play.

The following code allows to seek the downloaded section only and download is too quite slow.

<!DOCTYPE html>
<html>

<body>

<video id='myvideo' width="320" height="240" controls>
<source src="./21745_2160p.mp4" type="video/mp4"></video>

</body>
</html>

From internet got inspired to use blob object. Still time is an issue: 1.5 GB takes 40 secs to load. But once done seek and play works good.

<!DOCTYPE html>
<html>

<body>

<video id='myvideo' width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

</body>
</html>

<script type="text/javascript">
  console.time("timer1");
  fetch('./21745_2160p.mp4')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    console.log(blob)
    document.querySelector('#myvideo').src = URL.createObjectURL(blob);
    console.timeEnd("timer1");
});

</script>

Got this code from github Works just the way I want. Rendering is fast, but I have to browse and select the file. Seek n play works fine and no latency.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- see https://leightley.com/gist-html5-video-player-with-javascript/ -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>HTML5 API Video Player</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


  <!-- Custom styles for this template -->
  <style>
    body {
      padding-top: 54px;
    }

    video {
      width: 900px;
      height: 900px;
    }
    @media (min-width: 992px) {
      body {
        padding-top: 56px;
      }
    }
  </style>

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">HTML Video Player</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <div id="message"></div>
        <video controls autoplay></video>
        <ul class="list-unstyled">
          <li><input type="file" accept="video/*" /></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script>
    (function localFileVideoPlayer() {
      'use strict'
      var URL = window.URL || window.webkitURL

      var playSelectedFile = function(event) {
        var file = this.files[0]
        var type = file.type
        var videoNode = document.querySelector('video')
        var canPlay = videoNode.canPlayType(type)
        var isError = canPlay === 'no'

        if (isError) {
          return
        }

        var fileURL = URL.createObjectURL(file)
        videoNode.src = fileURL
      }
      var inputNode = document.querySelector('input')
      inputNode.addEventListener('change', playSelectedFile, false)
    })()
  </script>
</body>

</html>

I could not create the file object like this.files[0] on my own else I would have done that.

I believe the third like solution can be acheived using code because I don't want user selection. How to acheive that?

Soluton As @Harish figured it out, I opened the 1st html file on click via the file:/// prefix and it was running.

Answer 1

I believe this is what you wanted videojs.com This is the most popular framework to play videos on HTML. I tried copy-pasting the example snippet from the link, and it works just fine.

Creating blobs faster for video streaming

Question

1 answers

solution1
0 2021-06-25 06:50:42

Creating blobs faster for video streaming

Question

1 answers

solution1 0 2021-06-25 06:50:42

solution1
0 2021-06-25 06:50:42