-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathadvanced_zh.html
188 lines (187 loc) · 8.17 KB
/
advanced_zh.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>FFmpeg在线转码（FFmpeg网页版）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FFmpeg在线转码。在浏览器中使用FFmpeg进行转换。专家模式需要熟悉FFmpeg参数。由于wasm效率，仅推荐用于转换短视频或音频文件。">
<link crossorigin="anonymous" rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="alternate" hreflang="en" href="advanced.html" />
<link rel="alternate" hreflang="zh" href="advanced_zh.html" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8336276656855850" crossorigin="anonymous"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZZQVLS89C"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZZZQVLS89C');
</script>
</head>
<body>
<div id="app" style="margin-left: 10%; margin-right: 10%; margin-bottom: 5%;">
<h1>FFmpeg在线转码系统（FFmpeg网页版） - 专家模式</h1>
<el-row>
<p>Language/语言:
<el-link type="primary" href="advanced.html">English</el-link>
<el-link type="primary" href="advanced_zh.html">中文</el-link>
</p>
</el-row>
<h2>系统介绍</h2>
<el-row>
<p>在你的浏览器上运行FFmpeg进行转码（基于FFmpeg.wasm）。使用专家模式意味着你熟悉FFmpeg的参数。出于wasm的效率考虑，仅推荐转短视频或音频。</p>
<el-link type="warning" href="index_zh.html">点击切换到简单模式</el-link>
<p>
<el-link type="success" href="https://github.com/chn-lee-yumi/ffmpeg_in_browser">本项目在 GitHub 上开源（欢迎通过issue提建议和反馈）</el-link>
</p>
<p>
其它工具：
<el-link type="success" href="https://tool.gcc.ac.cn/">https://tool.gcc.ac.cn/</el-link>
</p>
</el-row>
<h2>配置</h2>
<el-row>
线程模式:
<el-switch v-model="threadMode" active-text="多线程 (更快但不稳定，只有部分浏览器支持，如遇报错请切回单线程)"
inactive-text="单线程" @change="reloadFFmpeg"></el-switch>
</el-row>
<h2>快捷指令</h2>
<el-row>
<el-button type="info" @click="setParams(``, `-c:v copy -c:a copy`, `output.mp4`)">复制视频和声音流到MP4</el-button>
<el-button type="info" @click="setParams(`-ss 5 -to 15`, `-c:v copy -c:a copy`, `output.mp4`)">裁剪第5-15秒</el-button>
<el-button type="info" @click="setParams(``, `-q:v 3`, `output.jpg`)">转JPG并设置质量</el-button>
<el-button type="info" @click="setParams(``, `-b:v 192k`, `output.mp3`)">转MP3并设置质量</el-button>
<el-button type="info" @click="setParams(``, `-ac 1`, `output.wav`)">转单声道WAV</el-button>
</el-row>
<h2>转码命令</h2>
<el-form :inline="true">
<el-form-item label="ffmpeg">
<el-input placeholder="-i 前面的参数" v-model="paramsFront" class="input-with-select" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="-i">
<el-upload ref="upload" :on-change="handleFiles" :auto-upload="false" limit="1" multiple="false" :on-exceed="handleExceed">
<el-button size="big" type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-input placeholder="-i 后面的参数" v-model="params" class="input-with-select" style="width: 500px"></el-input>
</el-form-item>
<el-form-item label="-o">
<el-input placeholder="输出文件名" v-model="outputName" class="input-with-select" style="width: 150px"></el-input>
</el-form-item>
<el-form-item>
<el-button size="big" type="success" @click="start" v-loading="loading" :disabled="loading">运行</el-button>
</el-form-item>
</el-form>
<h2>系统输出</h2>
<el-card class="box-card">
<pre id="tty" style="white-space: pre-wrap; word-wrap: break-word;">正在加载 FFmpeg，请耐心等候...</pre>
<el-row v-if="downloading">
<p v-model="currentLoadingUrl">下载中: {{currentLoadingUrl}}</p>
<el-progress :percentage="percentage"></el-progress>
</el-row>
</el-card>
</div>
</body>
<script crossorigin="anonymous" src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script src="common.js"></script>
<script>
new Vue({
el: '#app',
data: {
loading: false,
fileList: [],
file: null,
paramsFront: "",
params: "-c:v copy -c:a copy",
outputName: "output.mp4",
percentage: 0,
threadMode: false,
currentLoadingUrl: "",
total: 0,
received: 0,
downloading: false,
},
mounted: async function() {
this.loading = true;
this.downloading = true;
await load(this.threadMode, this.cb);
this.downloading = false;
this.loading = false;
log("FFmpeg 加载完毕！");
},
methods: {
setParams: function(paramsFront, params, output) {
this.paramsFront = paramsFront;
this.params = params;
this.outputName = output;
},
cb: function(data) {
this.currentLoadingUrl = data.url;
this.total = data.total;
this.received = data.received;
this.percentage = ((data.received / data.total) * 100).toFixed(0);
},
reloadFFmpeg: async function() {
cleanLog();
log("正在重新加载 FFmpeg...");
this.loading = true;
this.downloading = true;
await load(this.threadMode, this.cb);
this.downloading = false;
this.loading = false;
log("FFmpeg 加载完毕！");
},
handleFiles(file, fileList) {
this.file = file;
this.fileList = fileList;
},
handleExceed(files, fileList) {
this.$set(fileList[0], 'raw', files[0]);
this.$set(fileList[0], 'name', files[0].name);
this.$refs.upload.clearFiles();
this.$refs.upload.handleStart(files[0]);
},
start: async function() {
cleanLog();
const file = this.file;
if (this.file == null) {
alert("请选择文件。");
return;
}
this.loading = true;
console.log(file.name);
const inputDir = '/input';
const inputFile = `${inputDir}/${file.name}`;
await ffmpeg.createDir(inputDir);
await ffmpeg.mount('WORKERFS', {
files: [file.raw],
}, inputDir);
var args = [];
var paramsFront = this.paramsFront.trim();
if (paramsFront != "") args = args.concat(paramsFront.split(" "));
var middleArgs = ['-i', inputFile];
args = args.concat(middleArgs);
var params = this.params.trim();
if (params != "") args = args.concat(params.split(" "));
args.push(this.outputName);
console.log(args);
const err = await ffmpeg.exec(args);
if (err != 0) {
log("<strong>转码过程发生错误！请看上面的日志。</strong>");
} else {
log("正在导出文件...");
const data = await ffmpeg.readFile(this.outputName);
downloadFileByBlob(URL.createObjectURL(new Blob([data.buffer], {
type: "application/octet-stream"
})), this.outputName);
}
await ffmpeg.unmount(inputDir);
await ffmpeg.deleteDir(inputDir);
this.loading = false;
}
}
})
</script>
</html>