FFmpeg 剪辑视频的命令及我写到 html 代码
ffmpeg -ss ${start} -i ${input} -to ${end} -c copy ${output}
ffmpeg -ss 00:00:00.0 -i input.mp4 -to 00:30:00.0 -c copy output.mp4
我还顺便写了个简易的剪辑命令生成器
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>FFmpeg 视频剪辑命令生成</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="dropbox"></div>
<div><button onclick="getStartCurTime()">start</button> <button onclick="getEndCurTime()">end</button></div>
<div id="ffmpeg"></div>
<script src="./script.js"></script>
</body>
</html>
script.js
let dropbox;
//_V_.options.techOrder = ["flash"];
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
// ffmpeg -ss [start] -i [input] -to [end] -c copy [output]
let start = '00:00:00.0'
let input = ''
let end = '00:00:00.0'
let output = ''
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
let dt = e.dataTransfer;
let files = dt.files;
handleFiles(files);
}
let video = document.createElement("video")
function handleFiles(files) {
for (let i = 0; i < files.length; i++) {
let file = files[i];
console.log(file);
input = file.name
output = "out/" + input
// video.setAttribute("controls","controls")
video.controls = true;
video.autoplay = true;
video.classList.add("obj");
var fileURL = URL.createObjectURL(file)
video.src = fileURL
video.file = file;
video.className = "preview";
dropbox.appendChild(video);
}
}
function getStartCurTime() {
// start = new Date(video.currentTime * 1000).toISOString().substr(11, 8)
start = video.currentTime.toFixed(2)
document.getElementById("ffmpeg").innerHTML = `ffmpeg -ss ${start} -i ${input} -to ${end} -c copy ${output}`
}
function getEndCurTime() {
end = (video.currentTime - start).toFixed(2);
document.getElementById("ffmpeg").innerHTML = `ffmpeg -ss ${start} -i ${input} -to ${end} -c copy ${output}`
}
style.css
body {
}
#dropbox {
position:relative;
border:2px dashed #333333;
padding:15px;
background:rgba(0, 255, 0, .5);
}
#dropbox::before {
content:"Drop your MP4 file here...";
display:block;
font-size:12px;
padding:5px 0;
left:0;
}
.preview {
width:100%;
height:auto;
}