更快地为视频流创建 Blob答案

【问题标题】：Creating blobs faster for video streaming更快地为视频流创建 Blob
【发布时间】：2021-09-08 13:20:37
【问题描述】：

我是 js 新手。我会尽量把我的问题说清楚。我想在浏览器 localhost 上流式传输本地视频，也可以搜索和播放。

下面的代码只允许寻找下载的部分，下载太慢了。

<!DOCTYPE html>
<html>

<body>

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

</body>
</html>

从互联网得到启发使用 blob 对象。时间仍然是个问题： 1.5 GB 需要 40 秒才能加载。但是一旦完成，搜索和播放效果很好。

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

从github 获得此代码按我想要的方式工作。渲染速度很快，但我必须浏览并选择文件。 Seek n play 运行良好，没有延迟。

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

我无法自己创建像 this.files[0] 这样的文件对象，否则我会这样做。

我相信使用代码可以实现第三种类似的解决方案，因为我不希望用户选择。如何做到这一点？

解决方案 正如@Harish 发现的那样，我通过 file:/// 前缀单击打开了第一个 html 文件，它正在运行。

【问题讨论】：

标签： javascript html video-streaming html5-video blob

【解决方案1】：

我相信这就是你想要的videojs.com 这是在 HTML 上播放视频的最流行的框架。我尝试从链接中复制粘贴示例 sn-p，效果很好。

【讨论】：

原来代码不是问题。他曾经服务的python服务器有局限性。它无法无缝地提供视频文件。当尝试使用不同的静态文件托管服务器时，它运行良好。或者只需双击并在浏览器中打开 HTML 文件：D