在线js视频格式转换截图翻转编辑ffmpeg等操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>videoconverter.js - 浏览器视频转换</title>
<style type="text/css">
#terminal {
background: #fff;
color: #000;
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
font-weight: lighter;
border: solid 1px;
padding: 10px;
margin-top: 35px;
}
.terminal-top-bar {
background: rgb(233, 233, 233);
height: 14px;
font-size: 12px;
line-height: 14px;
margin-top: -30px;
margin-left: -11px;
margin-right: -11px;
padding: 3px;
text-align: center;
color: rgb(92, 92, 92);
border: solid 1px;
border-radius: 2px 2px 0 0;
}
.terminal-header {
padding-top: 15px;
}
#input {
width: 80%;
padding: 4px;
}
#run {
width: 15%
}
#output {
white-space: pre-wrap;
word-break: break-all;
}
#output.closed {
max-height: 200px;
overflow-y: scroll;
}
#files {
text-align: center;
}
#files img {
max-width: 80%;
}
.sample-commands {
text-align: center;
}
</style>
</head>
<body><div class="container-fluid">
<div class='content'>
<div class='inner-content'>
<div class="header clearfix">
<div class="pull-left">
<H1>在线js视频格式转换截图翻转编辑ffmpeg等操作
</H1>
</div></div><div class="clearfix">
<p>
待转换的视频
</p>
<video src="/bfwrepo/video/bigbuckbunny.webm" width="100%" autoplay="autoplay" controls="controls"></video>
<p>
待处理的图片
</p>
<img src="/bfwrepo/image/bigbuckbunny.jpg" width="100%" /><!--<p>-->
<!-- 选择视频<input type="file" accept="video/*" id="videoselect" />-->
<!--</p>--><div class="sample-commands">
<button class="plain-button sample" data-command="-help">帮助</button><button class="plain-button sample" data-command="-codecs">所有编码</button><button class="plain-button sample" data-command="-i input.jpeg -vf vflip output.jpeg"> 垂直翻转图片</button><button class="plain-button sample" data-command="-i input.jpeg -vf hflip output.jpeg"> 水平翻转图片</button><button class="plain-button sample" data-command="-i input.webm -vf showinfo -strict -2 output.mp4">在线视频转mp4格式</button><button class="plain-button sample" data-command="-t 5 -i input.webm -vf showinfo -strict -2 output.gif">在线视频转gif格式</button><button class="plain-button sample" data-command="-i input.webm -s 100x100 -f image2 -vf fps=fps=1,showinfo -an out%d.jpeg">视频截图</button><button class="plain-button sample" data-command="-i input.webm -vf"showinfo,drawbox=enable='between(n,0,60)' : x=10 : y=10 : w=50 : h=50 : color=red,drawbox=enable='gte(t,1)' : x=100 : y=100 : w=200 : h=200 : color=green" -strict -2 output.mp4">在视频上画个框</button><button class="plain-button sample" data-command="-t 3 -i input.webm -vf showinfo -strict -2 -c:v libx264 output.mp4">视频用H.264编码转换</button><button class="plain-button sample" data-command="-t 3 -i input.webm -vf showinfo -strict -2 -c:v libvpx-vp9 output.webm">视频用VP9编码转换</button></div>
<div id="terminal">
<div class="terminal-top-bar">
videoconverter.js
</div>
<div class="terminal-header">
<input id="input" value="-help" />
<button id="run" class="plain-button">执行ffmpeg命令</button>
<img id="image-loader" src="/bfwrepo/images/loading.gif" />
</div>
<pre id="output" style="height:100px;overflow:scroll;" >加载ffmpeg.js (很大，请稍后....)</pre>
</div>
<div id="files"></div>
</div>
</div>
</div></div><script>var worker;
var sampleImageData;
var sampleVideoData;
var outputElement;
var filesElement;
var running = false;
var isWorkerLoaded = false;
var isSupported = (function() {
return document.querySelector && window.URL && window.Worker;
})();function isReady() {
return !running && isWorkerLoaded && sampleImageData && sampleVideoData;
}function startRunning() {
document.querySelector("#image-loader").style.visibility = "visible";
outputElement.className = "";
filesElement.innerHTML = "";
running = true;
}
function stopRunning() {
document.querySelector("#image-loader").style.visibility = "hidden";
running = false;
}function retrieveSampleImage() {
var oReq = new XMLHttpRequest();
oReq.open("GET", "/bfwrepo/image/bigbuckbunny.jpg", true);
oReq.responseType = "arraybuffer";oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
if (arrayBuffer) {
sampleImageData = new Uint8Array(arrayBuffer);
}
};oReq.send(null);
}function retrieveSampleVideo() {
var oReq = new XMLHttpRequest();
oReq.open("GET", "/bfwrepo/video/bigbuckbunny.webm", true);
oReq.responseType = "arraybuffer";oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
if (arrayBuffer) {
sampleVideoData = new Uint8Array(arrayBuffer);
}
};oReq.send(null);
}function parseArguments(text) {
text = text.replace(/\s+/g, ' ');
var args = [];
// Allow double quotes to not split args.
text.split('"').forEach(function(t, i) {
t = t.trim();
if ((i % 2) === 1) {
args.push(t);
} else {
args = args.concat(t.split(" "));
}
});
return args;
}function runCommand(text) {
if (isReady()) {
startRunning();
var args = parseArguments(text);
console.log(args);
worker.postMessage({
type: "command",
arguments: args,
files: [{
"name": "input.jpeg",
"data": sampleImageData
},
{
"name": "input.webm",
"data": sampleVideoData
}]
});
}
}function getDownloadLink(fileData, fileName) {
if (fileName.match(/\.jpeg|\.gif|\.jpg|\.png/)) {
var blob = new Blob([fileData]);
var src = window.URL.createObjectURL(blob);
var img = document.createElement('img');img.src = src;
return img;
} else {
var a = document.createElement('a');
a.download = fileName;
var blob = new Blob([fileData]);
var src = window.URL.createObjectURL(blob);
a.href = src;
a.textContent = '点击下载 ' + fileName + "!";
return a;
}
}function initWorker() {
worker = new Worker("/bfwrepo/js/worker-asm.js");
worker.onmessage = function (event) {
var message = event.data;
if (message.type == "ready") {
isWorkerLoaded = true;
worker.postMessage({
type: "command",
arguments: ["-help"]
});
} else if (message.type == "stdout") {
outputElement.textContent += message.data + "\n";
} else if (message.type == "start") {
outputElement.textContent = "Worker has received command\n";
} else if (message.type == "done") {
stopRunning();
var buffers = message.data;
if (buffers.length) {
outputElement.className = "closed";
}
buffers.forEach(function(file) {
filesElement.appendChild(getDownloadLink(file.data, file.name));
});
}
};
}// document.querySelector("#videoselect").onchange = function() {
// // sampleVideoData = new Uint8Array(this.files[0]);
// var reader = new FileReader();
// //var fileByteArray = [];
// reader.readAsArrayBuffer(this.files[0]);
// reader.onloadend = function (evt) {
// if (evt.target.readyState == FileReader.DONE) {
// var arrayBuffer = evt.target.result,
// sampleVideoData = new Uint8Array(arrayBuffer);
// console.log(arrayBuffer);
// // for (var i = 0; i < array.length; i++) {
// //fileByteArray.push(array[i]);
// // }
// }
// }
// };
document.addEventListener("DOMContentLoaded", function() {initWorker();
retrieveSampleVideo();
retrieveSampleImage();var inputElement = document.querySelector("#input");
outputElement = document.querySelector("#output");
filesElement = document.querySelector("#files");inputElement.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
runCommand(inputElement.value);
}
}, false);
document.querySelector("#run").addEventListener("click", function() {
runCommand(inputElement.value);
});[].forEach.call(document.querySelectorAll(".sample"), function(link) {
link.addEventListener("click", function(e) {
inputElement.value = this.getAttribute("data-command");
runCommand(inputElement.value);
e.preventDefault();
});
});});
</script>
</body>
</html>

在线js视频格式转换截图翻转编辑ffmpeg等操作相关推荐

php视频格式转换---------ffmpeg-php扩展与ffmpeg.exe安装与使用
HP转换视频格式这个问题, 找了一下午的ffmpeg-php扩展的安装与使用方法,都是千篇一律转载的. 下面是我整理的步骤,希望能帮助大家这个问题. 1.下载ffmpeg-php扩展包和ffmpeg. ...
【FFmpeg】使用 FFmpeg 处理音视频格式转换流程 ( 解复用 | 解码 | 帧处理 | 编码 | 复用 )
FFmpeg 系列文章目录 [FFmpeg]Windows 搭建 FFmpeg 命令行运行环境 [FFmpeg]FFmpeg 相关术语简介 [FFmpeg]FFmpeg 相关术语简介二 [FFmpe ...
视频格式转换器之视频格式在线转换详细教程 1
视频格式转换器相信大家都是知道的,在日常工作和学习中,都是需要观看视频文件的,但是视频文件有众多的视频格式:MP4.MKV.MOV.AVI.SWF.FLV.WEBM等等,每个视频格式的画质以及设备兼容 ...
【PC工具】在线格式转换工具，视频格式转换，视频转gif工具
上次在社区发文章,得知文章编辑器终于支持gif格式的动图了,但得到gif的动图需要将mp4格式的视频进行格式转换,于是便找到了这个在线工具.这年头方便好用是第一位的,功能差不多的情况下在线工具优于绿色 ...
【JAVA】JAVA使用ffmpeg进行视频格式转换以及截图
JAVA 处理视频文件,需要用到 ffmpeg 这个工具.不需要依赖jar包.无论是在windows服务器还是linux服务器,想要使用 ffmpeg 都需要先安装. 附上Linux下 *.tar ...
Java使用ffmpeg进行视频格式转换、音视频合并、播放、截图
封装类: ffplay.ffmpeg.ffprobe是安装的ffmpeg路径. import java.io.BufferedReader; import java.io.File; import j ...
狸窝音频剪辑软件_「附下载链接」常用的5款视频格式转换软件，收藏起来吧...
日常生活中,大家可能会自己制作一些记录生活的小视频,或者作为爱好上传到视频平台,就会用到很多种的视频格式,比如MP4.MKV.WMV.FLV.MOV.DV等等.因为有的视频网站需要特殊格式的视频才能上 ...
Movavi HD Video Converter for Mac (优秀的视频格式转换工具) v22.1
今天和大家分享 Movavi HD Video Converter for Mac 中文版本,这是一款Mac上强大易用的视频格式转换工具,支持几乎所有常见的视频格式,提供大量针对不同设备的预设,简单易 ...
如何将蓝光M4V视频格式转换成MP4高清视频格式
Adobe Premiere Pro相信很多人应该都有用过吧,Adobe Premiere Pro简称"PR",是一款视频编辑软件,PR导出H.264编码的视频文件格式有两种:一种 ...

在线js视频格式转换截图翻转编辑ffmpeg等操作

在线js视频格式转换截图翻转编辑ffmpeg等操作相关推荐

最新文章

热门文章