diff --git a/.gitignore b/.gitignore index d1a2d31..3f32350 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ __pycache__/ debug.json *.mp4 *.png +!examples/**/*.mp4 diff --git a/README.md b/README.md index 24ffb99..f4d0e5b 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,15 @@ VSML HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ ## Description -HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ。 +HTML/CSSの記法で動画制作できる言語 VSMLを受け取り動画へ変換するエンコーダ。 バックエンドにはFFmpeg v4を使用。このプログラム自体はFFmpegを呼び出すラッパープログラムとなっているので、[FFmpeg公式](https://ffmpeg.org/download.html)からFFmpegをダウンロードする必要がある。 ## Demo 実際の挙動は[こちら](./syntax.md#サンプル) ## VS. -[Remotion](https://www.remotion.dev/) -類似プロダクトとしてReact.jsベースの動画編集ライブラリRemotionが挙げられる。 +[Remotion](https://www.remotion.dev/) +類似プロダクトとしてReact.jsベースの動画編集ライブラリRemotionが挙げられる。 React.jsをベースとしているためCSSを流用して動画編集ができるが，VSMLは動画制作を目的とした言語として設計しているためより動画制作向きなプロパティを使用して動画制作することができる。 ## Requirement @@ -20,8 +20,7 @@ React.jsをベースとしているためCSSを流用して動画編集ができ - FFmpeg v4 ## Usage -[Github Releases](https://github.com/PigeonsHouse/VSML/releases)から自分のOSに合ったバイナリを入手する。 -また、FFmpeg公式から自分のOSに合ったファイルをインストールする。 +[Github Releases](https://github.com/PigeonsHouse/VSML/releases)から自分のOSに合ったバイナリを入手する。また、FFmpeg公式から自分のOSに合ったファイルをインストールする。 記述したVSMLファイルのパスを実行引数に渡すと動画への変換が始まる。 `./main example.vsml` diff --git a/VSS.md b/VSS.md index 18595fa..8c1339b 100644 --- a/VSS.md +++ b/VSS.md @@ -1,7 +1,5 @@ # VSS - ## 共通プロパティ - 全てのタグに適用されるプロパティ - [x] object-length @@ -36,7 +34,6 @@ - `` ## 映像プロパティ - 画像や動画、テキストなどのグラフィック関連の操作をするプロパティ - [x] layer-mode @@ -129,7 +126,6 @@ - 自要素領域の右上境界線の角丸 ## 音声プロパティ - 音声関連の操作をするプロパティ - [x] audio-volume @@ -138,7 +134,6 @@ - モノラル・ステレオ ## テキストプロパティ - テキストを操作をするプロパティ - [x] font-color diff --git a/examples/aud.mp4 b/examples/aud.mp4 new file mode 100644 index 0000000..3637622 Binary files /dev/null and b/examples/aud.mp4 differ diff --git a/examples/img.mp4 b/examples/img.mp4 new file mode 100644 index 0000000..9cd2d10 Binary files /dev/null and b/examples/img.mp4 differ diff --git a/examples/layer.mp4 b/examples/layer.mp4 new file mode 100644 index 0000000..d3b8b79 Binary files /dev/null and b/examples/layer.mp4 differ diff --git a/examples/prl.mp4 b/examples/prl.mp4 new file mode 100644 index 0000000..636f6a9 Binary files /dev/null and b/examples/prl.mp4 differ diff --git a/examples/prl2.mp4 b/examples/prl2.mp4 new file mode 100644 index 0000000..5172b0d Binary files /dev/null and b/examples/prl2.mp4 differ diff --git a/examples/seq.mp4 b/examples/seq.mp4 new file mode 100644 index 0000000..5ef1dbb Binary files /dev/null and b/examples/seq.mp4 differ diff --git a/examples/txt.mp4 b/examples/txt.mp4 new file mode 100644 index 0000000..737fd4d Binary files /dev/null and b/examples/txt.mp4 differ diff --git a/syntax.md b/syntax.md index 76dea3f..5a63bbe 100644 --- a/syntax.md +++ b/syntax.md @@ -1,8 +1,7 @@ # VSML ## XMLの記法 -記法はHTMLと類似しています。XMLの一種となっています。 -以下の `vid` のように、単一のタグとして記述したり、 `txt` のように開始タグ、終了タグをわけて記述したりします。 -`vid` の `src` のようなタグの追加情報を記述する書き方をアトリビュートと言います。 +記法はHTMLをベースとしたXMLの一種となっています。 +以下の `vid` のように、単一のタグとして記述したり、 `txt` のように開始タグ、終了タグをわけて記述したりします。`vid` の `src` のようなタグの追加情報を記述する書き方をアトリビュートと言います。 また、 `cont` のように、開始タグと終了タグで記述した場合、間に別の要素やテキストを記述できます。その際、間に記述するテキストはインデント上げすることを推奨します。 ```xml @@ -18,8 +17,8 @@ ... ``` -基本的に上記のタグの間( `...` の箇所)に動画の情報を書いていきます。上記の詳細な意味は理解しなくても問題ありません。 -`vsml` タグの中には、 `meta`, `cont` のタグを含めることが出来ます。 `meta` タグの挿入は任意ですが、 `cont` タグは必ず含めるようにしてください。( `meta` タグがあれば `meta` タグの下の位置に) +基本的に上記のタグの間( `...` の箇所)に動画の情報を書いていきます。上記の詳細な意味は理解しなくても問題ありません。 +`vsml` タグの中には、 `meta`, `cont` のタグを含めることが出来ます。 `meta` タグの挿入は任意ですが、 `cont` タグは必ず含めるようにしてください。( `meta` タグがあれば `meta` タグの下の位置に) **↓ これは `cont` と `meta` が逆で動かない例** @@ -48,9 +47,8 @@ ``` ## 動画の要素 -`cont` タグには、`resolution`, `fps` の2つのアトリビュートが必須です。 -`resolution` には `{width}x{height}` と、幅の数値, 'x'(小文字のX), 高さの数値を並べた文字列を指定します。 -`fps` には 指定したいfpsの整数値を文字列にして指定します。 +`cont` タグには、`resolution`, `fps` の2つのアトリビュートが必須です。 +`resolution` には `{width}x{height}` と、幅の数値, 'x'(小文字のX), 高さの数値を並べた文字列を指定します。`fps` には指定したいfpsの整数値を文字列にして指定します。 記述の仕方は以下の通りです。以下は幅1920px、高さ1080px、60fpsの動画を作成する際の記述例です。 ```xml @@ -62,59 +60,151 @@ **source系** |タグ名|名前の意味|説明| |--|--|--| -|vid|video|映像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは映像の再生時間と同じになります。| -|aud|audio|音声を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは音声の再生時間と同じになります。| -|img|image|画像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。時間的長さは無限になります。| -|txt|text|タグで挟まれた範囲に書いたテキストを字幕として表示します。改行する場合は `br` タグが使用できます。時間的長さは無限になります。| +|vid|video|映像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は映像ファイルの再生時間と同じになります。| +|aud|audio|音声を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は音声ファイルの再生時間と同じになります。| +|img|image|画像を表示します。 `src` アトリビュートで動画ファイルを相対パス、絶対パスで指定できます。デフォルトの時間長は無限になります。| +|txt|text|タグで挟まれた範囲に書いたテキストを字幕として表示します。改行する場合は `br` タグが使用できます。デフォルトの時間長は無限になります。| **wrap系** |タグ名|名前の意味|説明| |--|--|--| -|seq|sequence-wrap|子要素に持つsource系、wrap系の要素を順番に再生します。子要素は左上揃えで再生されます。時間的長さは子要素の時間的長さの総和になります。| -|prl|parallel-wrap|子要素に持つsource系、wrap系の要素を並列に再生します。子要素は左上揃えで重ねて再生されます。時間的長さは、子要素の有限な時間的長さの最大値になります。子要素が全て時間的長さが無限である場合は無限になります。| +|seq|sequence-wrap|子要素に持つsource系、wrap系の要素を順番に再生します。子要素は左上揃えで再生されます。デフォルトの時間長は子要素の時間的長さの総和になります。| +|prl|parallel-wrap|子要素に持つsource系、wrap系の要素を並列に再生します。子要素は左上揃えで重ねて再生されます。デフォルトの時間長は、時間長が無限の子要素を除く，子要素の時間長の最大値になります。子要素の時間長が全て無限である場合は無限になります。| |rect|rectangle|seqの仕様をベースに、 `color` アトリビュートで背景色を指定できます。| |layer|single-layer|prlの仕様をベースに、子要素は、上揃えで右向きに並べて再生されます。| また、 `cont` タグは、 `seq` タグと同じく、子要素を順番に再生します。 -`cont` を含む `cont` 以下のタグは全て、 `id`, `class`, `style` というアトリビュートを持てます。 +`cont` 以下のタグ(当然 `cont` も含む)は全て、 `id`, `class`, `style` というアトリビュートを持てます。 `id`, `class` は、後述のVSSでスタイルを当てる対象として名前をつけることが出来ます。 (`id` に付ける名前と同一の名前の `id` は、VSMLファイル内で登場してはいけないのですが、現状の仕様として、制限をかけていないため、この2つのアトリビュートは同じ挙動を取ります。) `style` は、アトリビュートの値にスタイルのプロパティと値を指定すると、そのタグ単体にそのスタイルが当てられます。 -具体的な例は添付されている `.vsml` ファイルを確認ください。 - ## サンプル ### txt -image -
- +```xml + + + + + + 1つ目の文章 + + +``` + ### img -image -
- +```xml + + + + + +``` + ### aud -image -
- +```xml + + + + + +``` + ### seq -image -
- +```xml + + + + + + + + 1つ目の文章 + + + + +``` + ### prl -image -
- -
-image -
- +```xml + + + + + + + 1つ目の文章 + + + + +``` + + +```xml + + + + + + + + 1つ目の文章 + + + + +``` + ### layer -image -
- +```xml + + + + + + + 1つ目の文章 + + + + +``` +