为视频流更快地创建Blob

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

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

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

Soluton正如@Harish所想，我通过文件///前缀点击打开了第一个html文件，它正在运行。

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

相关内容

最新更新

热门标签：