TRY CODING FUN

重拾编程的乐趣

0%

FFmpeg 剪辑视频

发表于 更新于 分类于
本文字数： 2.9k 阅读时长 ≈ 3 分钟

FFmpeg 剪辑视频的命令及我写到html代码

1
2
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
}
相关文章