▶︎動画でも話してるので、文章読むのが面倒な方はこちらをみてもらえればと思います。
今回はビタ止めチャレンジの動画を一括生成する方法について解説します。
目次
ビタ止めチャレンジの動画を一括生成する方法について
ビタ止めチャレンジとは、特定のマークが重なるタイミングで動画の再生を止めると隠された画像が表示される動画のことです。
解説ではGoogleコラボを利用してこのような動画を生成します。
そのため、もしもGoogleコラボというキーワードが分からない場合は、以下にリンクを貼っておきますので、そちらをご確認ください。
Google Colabのサイトにアクセス
ここからの流れは下記に詳細リンクを貼っておきますので、そちらからご参照ください。
上記の記事ではハードウェアアクセラレータはT4 GPUですが、今回はハードウェアアクセラレータはCPUを選択します。
CPUは無料版のGoogleコラボでも選択できます。
しかし、無料版の場合はリソースの割当てが保証されていないため、処理の途中で強制的にコードを終了させられることがあります。
そのため、この動画では有料版のGoogleコラボで解説を進めます。
これでGoogle Colabでコードを実行するための準備が整いました。
Google Colabでコードを実行
下記に貼ってあるテキストをコピーします。
!pip install -q google-colab-selenium flask
%cd /content
!wget https://archive.creativaier.com/bitadome/app01.tar.gz
!tar -xzvf app01.tar.gz
!rm app01.tar.gz
%cd /content/app01
!nohup python app.py &
テキストをコピーしたらGoogleコラボの画面に戻り、テキストボックスに先ほどコピーしたテキストを貼り付け、再生ボタンを押します。
これで貼り付けたテキストの内容が実行されます。
処理が完了するまでしばらく待ちます。
しばらく待っているとボタンの左側にチェックマークが表示されます。
このマークが表示されたら処理が完了しています。
次に動画の元になる画像をアップロードします。
利用ファイルからサンプル画像読み込み
この動画の解説ではあらかじめサンプルの画像を用意してあります。
下記に貼ってあるリンク先のページを表示します。
このページを表示したら利用ファイルと書かれているタイトルの下にあるZIPファイルをクリックします。
そうするとZIPファイルがダウンロードされるので、解凍します。
今回利用する画像ファイルはこのような構成で配置します。
メインの画像はアルファベットの小文字のaになっています。
これに対して、アルファベットの小文字のbになっている画像がビタ止めされた時に表示する画像です。
そして先頭の数字でペアになるように紐付けています。
このようなルールで作成した画像をフォルダーの直下に配置します。
なお、ここでは解説のために解凍した状態で説明していますが、ファイルをアップロードする時はこのフォルダーを圧縮します。
つまりZIPファイルにしたものをアップロードします。
読み込んだ画像をアップロード
アップロードするためのZIPファイルを用意したら、下記に貼ってあるテキストをコピーします。
from google.colab import files
import zipfile
import os
import shutil
def upload_files():
"""アップロードされたファイルを受け取り、ZIPファイルを解凍する関数"""
uploaded = files.upload()
target_dir = '/content/images'
clear_directory(target_dir)
for fn in uploaded.keys():
print(f'User uploaded file "{fn}" with length {len(uploaded[fn])} bytes')
if fn.endswith('.zip'):
extract_zip(fn, target_dir)
remove_macosx_artifacts(target_dir)
return target_dir
def clear_directory(path):
"""指定されたディレクトリをクリアする関数"""
if os.path.exists(path):
shutil.rmtree(path)
os.makedirs(path)
def extract_zip(zip_path, extract_to):
"""ZIPファイルを解凍する関数"""
with zipfile.ZipFile(zip_path, 'r') as zip_ref:
zip_ref.extractall(extract_to)
def remove_macosx_artifacts(directory):
"""__MACOSXフォルダーを削除する関数"""
macosx_path = os.path.join(directory, '__MACOSX')
if os.path.exists(macosx_path):
shutil.rmtree(macosx_path)
def flatten_directory(directory):
"""ディレクトリをフラット化する関数、移動されたファイルの数を返す"""
total = 0
for root, dirs, files in os.walk(directory, topdown=False):
for file in files:
original_path = os.path.join(root, file)
new_path = os.path.join(directory, file)
new_path = resolve_conflicts(new_path)
shutil.move(original_path, new_path)
total += 1
for dir in dirs:
dir_path = os.path.join(root, dir)
if len(os.listdir(dir_path)) == 0:
os.rmdir(dir_path)
return total
def resolve_conflicts(path):
"""ファイル名の衝突を解決する関数"""
base, extension = os.path.splitext(path)
counter = 1
while os.path.exists(path):
path = f"{base}_{counter}{extension}"
counter += 1
return path
# アップロードされたファイルを処理し、指定されたディレクトリにZIPファイルを解凍
target_dir = upload_files()
# フラットにしたいディレクトリのパスを指定して関数を実行
total = flatten_directory(target_dir)
# 移動したファイルの総数を2で割った値をloop_countに格納
loop_count = total // 2
import google_colab_selenium as gs
from selenium.webdriver.chrome.options import Options
import time
import os
# Instantiate options
options = Options()
# Add extra options
options.add_argument("--window-size=1920,1080") # Set the window size
options.add_argument("--disable-infobars") # Disable the infobars
options.add_argument("--disable-popup-blocking") # Disable pop-ups
options.add_argument("--ignore-certificate-errors") # Ignore certificate errors
options.add_argument("--incognito") # Use Chrome in incognito mode
# ダウンロードフォルダを設定
webm_files_dir = '/content/webm_files'
if os.path.exists(webm_files_dir):
shutil.rmtree(webm_files_dir)
os.makedirs(webm_files_dir, exist_ok=True)
download_folder = webm_files_dir
prefs = {"download.default_directory" : download_folder}
options.add_experimental_option("prefs", prefs)
for i in range(1, loop_count + 1):
shutil.copy(f'/content/images/{i:02d}_a.png', f'/content/app01/static/01_a.png')
shutil.copy(f'/content/images/{i:02d}_b.png', f'/content/app01/static/01_b.png')
driver = gs.Chrome(options=options)
driver.get('http://127.0.0.1:5000')
# 動画生成まで単純に1分待機させている
# 生成されない場合は、この数値を増やす
time.sleep(60)
driver.quit()
テキストをコピーしたらGoogleコラボの画面に戻ります。
コードと書かれているボタンをクリックします。
新しいテキストボックスが追加されるので、先ほどコピーしたテキストを貼り付けます。
そして再生ボタンを押します。
そうするとアップロードボタンが表示されます。
このアップロードボタンをクリックします。
ダイアログボックスが表示されるのでZIPファイルを選択します。
これで動画の生成処理が開始されます。
この処理には5分以上かかると思います。
しばらく待っていると処理が完了します。
処理が完了したら、下記にあるテキストをコピーします。
import subprocess
import os
import shutil
from google.colab import files
# 入力となる.webmファイルがあるディレクトリのパス
input_dir = "/content/webm_files"
# 出力.mp4ファイルを保存するディレクトリのパス
output_dir = "/content/mp4_files"
# 出力ディレクトリが存在する場合は削除し、再作成
if os.path.exists(output_dir):
shutil.rmtree(output_dir)
os.makedirs(output_dir)
# 入力ディレクトリ内の全てのファイルを走査
for file_name in os.listdir(input_dir):
if file_name.endswith(".webm"):
# 入力ファイルの完全なパス
input_file_path = os.path.join(input_dir, file_name)
# 出力ファイル名（拡張子を.mp4に変更）
output_file_name = os.path.splitext(file_name)[0] + ".mp4"
# 出力ファイルの完全なパス
output_file_path = os.path.join(output_dir, output_file_name)
# ffmpegコマンドを構築
command = [
"ffmpeg",
"-i", input_file_path,
"-c:v", "libx264",
"-crf", "23",
"-c:a", "aac",
"-strict", "experimental",
output_file_path
]
# ffmpegコマンドを実行
subprocess.run(command)
# ZIPファイルのパスを正確に指定
zip_file_path = '/content/mp4_files.zip'
# 出力ディレクトリをZIPファイルに圧縮し、正確なパスを指定
shutil.make_archive(zip_file_path.replace('.zip', ''), 'zip', output_dir)
# ZIPファイルをダウンロード
files.download(zip_file_path)
テキストをコピーしたらGoogleコラボの画面に戻ります。
コードと書かれているボタンをクリックして新しく追加されたテキストボックスにコピーしたテキストを貼り付けます。
そして再ボタンを押します。
これで生成した動画ファイルがZIPファイルにまとめられてダウンロードされます。
ファイルがダウンロードされるまでしばらく待ちます。
しばらく待っているとこのような動画ファイルがダウンロードされます。
生成された動画確認
今回生成された動画がこちらです。
この解説ではこのような動画を3件まとめて作成いたしました。
今回の解説は以上です。
是非お試しください。
