-
Notifications
You must be signed in to change notification settings - Fork 0
/
ffmpegtest.html
130 lines (109 loc) · 3.61 KB
/
ffmpegtest.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#download,
#play {
visibility: hidden;
}
.downloadBar {
box-sizing: border-box;
width: 100%;
height: 40px;
border: 1px solid #aaa;
border-radius: 4px;
overflow: hidden;
background-color: #eee;
}
.downloadBarInner {
width: 0;
height: 38px;
background-color: #add;
font-size: 20px;
color: red;
line-height: 38px;
}
</style>
</head>
<body>
<input type="text" id="input">
<button id="btn">开始解析</button>
<button id="download">下载</button>
<button id="play">播放</button>
<hr>
<div class="downloadBar">
<div class="downloadBarInner"></div>
</div>
<script src="./ffmpeg.min.js"></script>
<script type="text/javascript">
if (!self.crossOriginIsolated) {
alert("非隔离环境")
}
function Uint8ArrayToString(fileData) {
var dataString = "";
for (var i = 0; i < fileData.length; i++) {
dataString += String.fromCharCode(fileData[i]);
}
return dataString
}
function downloadFile(name, url) {
const bodys = document.querySelector("body")
const dom = document.createElement("a")
dom.download = name
dom.href = url
bodys.appendChild(dom)
dom.click()
bodys.removeChild(dom)
}
function playVideo(url) {
const bodys = document.querySelector("body")
const dom = document.createElement("video")
dom.src = url
dom.controls = true
dom.style.width = "100%"
dom.style.maxWidth = "320px"
bodys.appendChild(dom)
}
const { createFFmpeg, fetchFile } = FFmpeg
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
});
const downloadBtn = document.querySelector("#download")
const playBtn = document.querySelector("#play")
const downloadLine = document.querySelector(".downloadBarInner")
let downloadURL = ""
async function getmoive() {
await ffmpeg.load();
const name = "outvideo.mp4"
const url = document.querySelector("#input").value
let urlPre = url.slice(0, url.lastIndexOf("/")) + "/"
let str = ""
let arrs = Uint8ArrayToString(await fetchFile(url)).split("\n").filter(item => item.endsWith(".ts")).map(item => item = urlPre + item)
for (var i = 0; i < arrs.length; i++) {
let item = arrs[i]
let tsname = `ts${i}.ts`
ffmpeg.FS('writeFile', tsname, await fetchFile(item));
str += "|" + tsname
downloadLine.innerText = `${i+1}/${arrs.length} (${(i+1)* 100/arrs.length.toFixed(0)}%)`
downloadLine.style.width = ((i + 1) * 100 / arrs.length).toFixed(0) + "%"
}
str = str.slice(1)
await ffmpeg.run("-i", `concat:${str}`, "-bsf:a", "aac_adtstoasc", "-movflags", "+faststart", "-c", "copy", name)
const datas = ffmpeg.FS("readFile", name)
downloadURL = URL.createObjectURL(new Blob([datas.buffer], { type: 'video/mp4' }));
downloadBtn.style.visibility = "visible"
playBtn.style.visibility = "visible"
}
document.querySelector("#btn").onclick = getmoive
downloadBtn.onclick = function() {
downloadFile("video.mp4", downloadURL)
}
playBtn.onclick = function() {
playVideo(downloadURL)
}
</script>
</body>
</html>