-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex_zh.html
163 lines (162 loc) · 6.85 KB
/
index_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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>FFmpeg在线转码 - 免费图片音频视频转码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FFmpeg在线转码。FFmpeg网页版。在线图片音频视频转码，格式转换。通过浏览器轻松转换视频和音频格式。转码速度取决于您计算机的性能。">
<link crossorigin="anonymous" rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="alternate" hreflang="en" href="index.html" />
<link rel="alternate" hreflang="zh" href="index_zh.html" />
<script src="enable-threads.js"></script>
<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="index.html">English</el-link>
<el-link type="primary" href="index_zh.html">中文</el-link>
</p>
</el-row>
<h2>系统介绍</h2>
<el-row>
<p>视频音频格式随便转。支持 MP3 转 WAV，ogg 转 MP3，mp4 转 gif，webm 转 mp4，mp4 转 mp3，svg 转 png 等等。</p>
<p>你的文件将在本地进行处理，保证安全隐私。使用浏览器转码，速度取决于你的电脑性能。仅推荐转短视频或音频，大型视频请使用专业软件转码。视频截取等高级功能请使用专家模式。</p>
<p>
<el-link type="warning" href="advanced_zh.html">点击切换到专家模式</el-link>
</p>
<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>
<el-row>
视频码率：
<el-input placeholder="留空代表默认，示例值：2m, 1m, 512k" v-model="videoBitrate" style="width: 30%;"></el-input>
（注：图片和音频文件请留空）
</el-row>
<el-row>
音频码率：
<el-input placeholder="留空代表默认，示例值：128k, 96k" v-model="audioBitrate" style="width: 30%;"></el-input>
（注：图片文件请留空）
</el-row>
<el-row>
输出文件名：
<el-input placeholder="" v-model="outputName" style="width: 30%;"></el-input>
（注：格式直接取决于文件名后缀，请勿和选择的文件同名）
</el-row>
<h2>开始转码</h2>
<el-upload v-loading="loading" :on-change="handleFiles" :file-list="fileList" :auto-upload="false">
<el-button size="big" type="primary">选择文件</el-button>
</el-upload>
<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/[email protected]/dist/vue.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script src="common.js"></script>
<script>
new Vue({
el: '#app',
data: {
loading: false,
fileList: [],
videoBitrate: "",
audioBitrate: "",
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: {
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: async function(file, fileList) {
cleanLog();
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 = ['-i', inputFile];
if (this.videoBitrate != "") {
args = args.concat(['-b:v', this.videoBitrate])
}
if (this.audioBitrate != "") {
args = args.concat(['-b:a', this.audioBitrate])
}
args.push(this.outputName);
this.fileList = [];
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>