回答編集履歴
4
CSSアニメーションを追記
test
CHANGED
@@ -129,3 +129,39 @@
|
|
129
129
|
アドバイスするなら、そのサイトがヒットした時に備えて独自ドメインだけは取っておきなさい。
|
130
130
|
|
131
131
|
そうすれば、いざ転送量過多でレンタルサーバから追い出されても、もっと強力なサーバに移行出来るわよ。
|
132
|
+
|
133
|
+
|
134
|
+
|
135
|
+
---
|
136
|
+
|
137
|
+
|
138
|
+
|
139
|
+
おまけ: CSSアニメーションに関して
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
もしかしてBlob云々は興味本位であって、
|
144
|
+
|
145
|
+
ムービー的なものなら何でも良かったのかしら?
|
146
|
+
|
147
|
+
|
148
|
+
|
149
|
+
参考サイト: [drop out](https://magical-girl.site/)
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
このサイト、実は全部CSSアニメーションよ。
|
154
|
+
|
155
|
+
だから手間暇は掛かってるしレンダリングがそこそこ重いけど、ファイルサイズ自体はとても軽い。
|
156
|
+
|
157
|
+
このサイトは大量のPNG画像を使ってるから8MBの超力作になってるけど、2MBはアニメーションとは関係ない画像だし、PNGを極力さけてSVG中心にしていけばもう2MB程は削れるかもしれないわね。
|
158
|
+
|
159
|
+
|
160
|
+
|
161
|
+
このクオリティでmpegにしたら多分20〜30MBくらいになるんじゃないかしら?
|
162
|
+
|
163
|
+
動画はあまり詳しくないからヤマカンだけど、線をきっちり出そうとすると1000Kbpsくらいにはなるわよね?
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
質問の根底がmpegの動画ファイルではなく、可愛いアニメーションで魅せたいという要望なら、実現出来ると思うからCSSアニメーションについて調べてみてね。
|
3
更に考察をすすめた
test
CHANGED
@@ -6,21 +6,31 @@
|
|
6
6
|
|
7
7
|
|
8
8
|
|
9
|
-
確かに一度HTML
|
9
|
+
確かに一度HTML、JS、CSS、画像データはダウンロードしてしまえば、それ以上の通信は発生しないわね。
|
10
10
|
|
11
11
|
動画のバイナリデータはたった数秒でも凄まじいサイズになる。
|
12
12
|
|
13
|
-
|
13
|
+
[midi](https://ja.wikipedia.org/wiki/MIDI)のような仕組みを構築したいという要望よね?
|
14
14
|
|
15
|
+
|
16
|
+
|
15
|
-
ま
|
17
|
+
まぁ扱うモノにもよるわね。
|
18
|
+
|
19
|
+
例えばゲームのプレイングムービーのようなものをコマ枚に画像データにして、パラパラ漫画のように差し込んでいく作り方をするなら完全に無駄よ。
|
20
|
+
|
21
|
+
動画のエンコーダーも賢いから時系列で色が変わってない箇所は色の情報を削ったりして軽量化してるから逆に重くなる。
|
22
|
+
|
23
|
+
でも逆に、写真や図形を切り貼りして音楽を付けたようなものなら確実に軽くなるでしょうね。
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
わざわざ質問する位だから後者の使い方なのよね?そちらの想定で話を進めましょう。
|
16
28
|
|
17
29
|
|
18
30
|
|
19
31
|
次、作ったBlob形式の動画データ。
|
20
32
|
|
21
|
-
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
|
33
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけれど、どちらもメモリ空間上のデータをそのまま保存するから転送量は一切かからない。
|
22
|
-
|
23
|
-
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
24
34
|
|
25
35
|
これも質問文の通りね。
|
26
36
|
|
@@ -32,7 +42,7 @@
|
|
32
42
|
|
33
43
|
フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ。
|
34
44
|
|
35
|
-
(調査したら多分いけるという事は分かったけど、
|
45
|
+
(調査したら多分いけるという事は分かったけど、根本的な解決になってないからオススメはしない)
|
36
46
|
|
37
47
|
|
38
48
|
|
@@ -84,6 +94,14 @@
|
|
84
94
|
|
85
95
|
|
86
96
|
|
97
|
+
よしんば動画データにできても、今度はその動画データを再生するところまでがゴールでしょ?
|
98
|
+
|
99
|
+
ブラウザの種別によってコンパイルする動画データを切り替えるような処理も必要になりそうね。
|
100
|
+
|
101
|
+
私だったら何百万積まれても絶対やらないわ。
|
102
|
+
|
103
|
+
|
104
|
+
|
87
105
|
---
|
88
106
|
|
89
107
|
|
2
やり方が見つかったので出来る調に変更
test
CHANGED
@@ -16,9 +16,9 @@
|
|
16
16
|
|
17
17
|
|
18
18
|
|
19
|
-
|
19
|
+
次、作ったBlob形式の動画データ。
|
20
20
|
|
21
|
-
BlobをURLに変換させてDLさせるという違いこそあるけど、
|
21
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、BlobをURLに変換させてDLさせるという違いこそあるけど、
|
22
22
|
|
23
23
|
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
24
24
|
|
@@ -30,23 +30,21 @@
|
|
30
30
|
|
31
31
|
でも、どうやって動画を生成するの?
|
32
32
|
|
33
|
-
フロントエンドエンジニアのほぼ全員が即答で無理と答える
|
33
|
+
フロントエンドエンジニアのほぼ全員が即答で無理と答えるくらい難易度が高いわよ。
|
34
|
+
|
35
|
+
(調査したら多分いけるという事は分かったけど、ネットワークの負荷対策としては酷いからオススメはしない)
|
34
36
|
|
35
37
|
|
36
38
|
|
37
|
-
|
39
|
+
HTML5で実装されたのは主に「動画を再生」する機能、動画を生成する機能はとてもしょぼいのよ。
|
38
40
|
|
39
|
-
|
41
|
+
バイナリデータを触れるってだけで、JavaScriptはそもそもバイナリデータを触る為の言語じゃないし。
|
40
42
|
|
43
|
+
私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、MediaRecorderという機能くらいしか見つからなかったわ。
|
41
44
|
|
45
|
+
`new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいけるんじゃないかしら?
|
42
46
|
|
43
|
-
HTML5で実装された機能は「動画を再生」する機能は豊富だけど、動画を生成する機能はとてもしょぼいわよ。
|
44
|
-
|
45
|
-
私も「HTML5 Web標準API バイブル」という書籍を眺めたけれど、ワンチャンあるのがMediaRecorderという機能のみ。
|
46
|
-
|
47
|
-
`new MediaRecorder(stream)`で作成する時にChromeの画面を60fpsでパシャパシャ記録する`stream`を自作すればいける……かも。
|
48
|
-
|
49
|
-
まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人は
|
47
|
+
まぁ、このstreamの作り方は私も皆目見当がつかないし、多分答えられる人は居ないんじゃないかしら。
|
50
48
|
|
51
49
|
|
52
50
|
|
@@ -61,6 +59,32 @@
|
|
61
59
|
[Emscripten](http://kripken.github.io/emscripten-site/index.html)というソフトを使えば移植は可能だけど、C言語がある程度触れないとスタートラインに立てないわ。
|
62
60
|
|
63
61
|
動画を扱うなら専用のパーサはC言語で付け足す必要があるし、私は二度とやりたくないわね……
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
【追記】
|
66
|
+
|
67
|
+
もしかしたらあるかも…と思って探したら案の定見つかったわ。
|
68
|
+
|
69
|
+
[videoconverter.js](https://github.com/bgrins/videoconverter.js)
|
70
|
+
|
71
|
+
|
72
|
+
|
73
|
+
> FFmpeg library into JavaScript, using Emscripten.
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
コマンドライン操作でAviファイルを生成するFFmpegというソフトがあって、それをEmscriptenでJSにコンパイルしなおしたもののようね。
|
78
|
+
|
79
|
+
でも、出来ると言ってもEmscriptenで生成したJSファイルは死ぬほど扱いが難しいし、
|
80
|
+
|
81
|
+
動画データをエンコードするのは凄まじい負荷が掛かるから、普通にDLするより絶対時間かかるし、スマホで見ようとすると燃えるように発熱するでしょうね。
|
82
|
+
|
83
|
+
GUI操作のパソコンの動画メーカーみたいなソフトをWeb上で自作するつもりでなければオススメしないわ。
|
84
|
+
|
85
|
+
|
86
|
+
|
87
|
+
---
|
64
88
|
|
65
89
|
|
66
90
|
|
1
文頭を構成:;(∩´﹏`∩);:
test
CHANGED
@@ -6,23 +6,37 @@
|
|
6
6
|
|
7
7
|
|
8
8
|
|
9
|
-
J
|
9
|
+
確かに一度HTMLやJSファイルをダウンロードしてしまえば、それ以上の通信は発生しないわね。
|
10
10
|
|
11
|
+
動画のバイナリデータはたった数秒でも凄まじいサイズになる。
|
12
|
+
|
11
|
-
|
13
|
+
例えばmidiという音楽の楽譜ファイルを落として、ローカルで音を鳴らすような仕組みを構築出来れば通信量を抑えられるのではないかと考えたわけよね?
|
14
|
+
|
15
|
+
まず、この考え方自体は合ってるわ。
|
12
16
|
|
13
17
|
|
14
18
|
|
15
|
-
|
19
|
+
FileAPIを使ってフォルダを指定してあげてそこに改めて書き込むか、
|
16
20
|
|
21
|
+
BlobをURLに変換させてDLさせるという違いこそあるけど、
|
22
|
+
|
23
|
+
どちらもメモリ空間上のデータをそのまま保存するだけだから転送量は一切かからない。
|
24
|
+
|
17
|
-
|
25
|
+
これも質問文の通りね。
|
18
26
|
|
19
27
|
|
20
28
|
|
29
|
+
だから転送量対策としては一考の余地があるわね。
|
30
|
+
|
21
31
|
でも、どうやって動画を生成するの?
|
22
32
|
|
23
|
-
|
33
|
+
フロントエンドエンジニアのほぼ全員が即答で無理と答えるでしょうね。
|
34
|
+
|
35
|
+
|
24
36
|
|
25
37
|
下に理由は書いておくけど、ローカルで動画を作るというのは呼吸をするように何でも自動化したり作れる凄腕のエンジニアでもなければほぼ無理よ。
|
38
|
+
|
39
|
+
私も回避策を色々練ってみたけど、難易度が高すぎてプロトタイプ作るのだけでも数ヶ月スパンで掛かる…仕事という形では残念ながら引き受けられない。
|
26
40
|
|
27
41
|
|
28
42
|
|