更快地为视频流创建 Blob
Posted
技术标签:
【中文标题】更快地为视频流创建 Blob【英文标题】：Creating blobs faster for video streaming 【发布时间】：2021-09-08 13:20:37 【问题描述】：我是 js 新手。我会尽量把我的问题说清楚。我想在浏览器 localhost 上流式传输本地视频，也可以搜索和播放。
-
下面的代码只允许寻找下载的部分，下载太慢了。
<!DOCTYPE html>
<html>
<body>
<video id='myvideo' controls>
<source src="./21745_2160p.mp4" type="video/mp4"></video>
</body>
</html>
-
从互联网得到启发使用 blob 对象。时间仍然是个问题：
1.5 GB 需要 40 秒才能加载。但是一旦完成，搜索和播放效果很好。
<!DOCTYPE html>
<html>
<body>
<video id='myvideo' 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 文件，它正在运行。
【问题讨论】：
【参考方案1】：我相信这就是你想要的videojs.com 这是在 HTML 上播放视频的最流行的框架。我尝试从链接中复制粘贴示例 sn-p，效果很好。
【讨论】：
原来代码不是问题。他曾经服务的python服务器有局限性。它无法无缝地提供视频文件。当尝试使用不同的静态文件托管服务器时，它运行良好。或者只需双击并在浏览器中打开 HTML 文件：D以上是关于更快地为视频流创建 Blob的主要内容，如果未能解决你的问题，请参考以下文章