【開発日誌】複数の動画を同時再生できるツール

【開発日誌】複数の動画を同時再生できるツール

複数の動画を同時再生できるツール

https://hyperts.net/multi-video/

 


 

説明

mp4形式(ブラウザが読み込める形式)の動画を複数同時に再生できるWebツールです。

PCのみで、スマホには対応していません。

PCでもIEには対応していません。FirefoxかChromeまたはEdgeを使ってください。

2つの動画を同時に再生させるだけならこれで事足りると思います。

 

 

作った経緯

「ゼノブレイド2」のタイムアタックで検証したいことがあって、複数同時に動画を並べて再生させたかったのですが簡易に再現できるものがなかったので作りました。

作業の片手間10分ぐらいで作ったので足りていない機能が山ほどありますが代替ツールが他に見つからなかったので公開しています。

 

既存のソフトはわざわざ動画を変換したり、通常のプレイヤーは再生を同期させるのが難しかったりするのでこれが役に立ちます。

ブラウザの力を借りれば私でも片手間で作れるほど簡単なものが何故世に出ていないのか・・・。得意な人ならElectronとかでササッと作れるでしょうに。

 

同期は動画のフレームレートが統一されていないことも想定して若干緩くなっています。

フレームレートを取得する方法で堅いものが見つからなかったので、そもそも実装するのは難しいのかもしれません。

 

 

追加したい機能・アイディア

  • 動画サイトの動画を読み込む

実装は可能だと思いますがYoutubeが禁止していたような気もします。広告で中断されたりもするので現実的ではなさそうです。

「動画ファイル」に対応しているので実質突破できています。

 

  • 同期の位置調整を便利に

「直感的に」「簡単に」微調整できるようにするには?アイディアがありません。

あと動画は最大4つまで読み込めるようにしていますが、位置調整できるのは2つ目までです。需要があれば4つ目まで対応させるのでコメントからお願いします。

 

  • 長さが合わない動画に対応させる

開始点より前の位置で同期させたい場合の処理はまだ作っていません。これも必要であればコメントからお願いします。

 

  • 動画を上下左右に分割したものをつなげて表示させる

Canvasを使えば可能らしいですがCSSだけでもなんとかなりそうな、ならなそうな。

 

 

以上です。不具合や追加して欲しい機能、アイディアがあればコメントしておいてください。私に可能であれば組み込んでみようと思います。

 

この記事へのコメント

  1. 名前:TMT 2022/04/18(月) 13:23:05返信する

    ブラウザで動かす動画同時再生ツール検索で辿りつきました。
    私のリリースしたいものとかなり近しく、例えば私が製作費をお出しして、hyper_Tさまに制作頂くことは可能でしょうか?
    お忙しいところお手数をおかけいたしますが、ご相談ベースからお話しをさせて頂けますと幸いです。
    何卒よろしくお願いいたします。

  2. 名前:PE teacher 2023/04/28(金) 07:17:30返信する

    小学校で体育の教員をしております。
    器械運動の授業において、お手本の動画と自分の動画を同時に再生して、自分の技の出来具合をお手本と比較することが可能なツールがないものかと探していてこのツールに出会いました。
    学年によって使っているディバイスが異なる(iPad/Cromebook)ため、ブラウザ上手動くこのツールは、まさに神ツールです。このようなツールを公開していただき本当にありがとうございます。

    お手本と自分の動画の再生タイミングを合わせる時間帯が場合によっては動画の中ほどになることがあるため、タイミングを合わせた後にワンクリックで一定時間巻き戻される機能があると助かります。

    わがままを申し上げて恐縮ですが、ご検討いただけますと幸いです。

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。