この記事の目的は、Alist と VideoTogether を同時に使用したいユーザーに向けてです。チュートリアルは主にユーザー体験に焦点を当てているため、この記事は比較的初心者向けのチュートリアルです。もちろん、Alist と VideoTogether をすでに使用したことがあるユーザーを対象としています。
体験の例はこちら https://libilibi.eu.org/
なぜ Alist と VideoTogether を使用するのか#
主な理由は、VideoTogether はほとんどの動画サイトをサポートしているものの、実際のところ、多くの動画サイトの体験は良くありません。正規のサイトでは基本的にメンバーシップが必要であり、違法なサイトでは読み込みに失敗することがよくあり、非常に不安定です。そのため、「自分で管理する動画サイト」を使用して同期することは非常に重要です。Alist を使用して動画再生を行うことで、この問題を解決することができます。
また、Alist はグローバルなカスタムヘッダーを使用して VideoTogether をウェブサイトに追加することもできます。これにより、すべての仲間に VideoTogether プラグインのインストールを要求する必要がありません。リンクを開くだけで直接同期することができます。
Alist のデプロイ#
この部分は Alist の公式ドキュメントを参考にしています。基本的には公式ドキュメントの Docker の方法を参考にしています。この記事では、すでに docker-compose がインストールされている VPS にインストールすることを前提としています（この部分については、このリンクを参考にしてください：Compose プラグインのインストール）。
もちろん、Alist は Synology NAS やルーターなど、さまざまな場所にデプロイすることもできます。詳細については、Alist の公式ドキュメントを参照してください。
以下はデプロイの手順です。
1.VPS に SSH で接続します。
2. ドキュメントに公式の docker-compose ファイルを VPS にコピーします。
version: '3.3'
services:
alist:
restart: always
volumes:
- '/etc/alist:/opt/alist/data'
ports:
- '5244:5244'
environment:
- PUID=0
- PGID=0
- UMASK=022
container_name: alist
image: 'xhofe/alist:main'
docker-compose ファイルを作成したら、次のコマンドを使用して起動します。一部の国内の VPS では、ポートの開放状況に注意する必要があるかもしれません。ファイアウォールのルールを設定したり、ファイアウォールを無効にしたりする必要があるかもしれません。
copydocker-compose up -d
4. これでコンテナが起動し、次のコマンドで確認できます。
copydocker ps
5. 以下のコマンドを使用して admin パスワードを表示します。
copydocker exec -it alist ./alist admin
6. 次に、IP:5244 の方法でアクセスできるようになります。問題がなければ、admin と上記のパスワードでバックエンドにログインできます。
VideoTogether をウェブサイトに追加する#
VideoTogether のドキュメントに従ってください。
以下のスクリプトを追加するだけです。
copy<script src="https://2gether.video/release/extension.website.user.js"></script>
1.Alist のバックエンドに入り、グローバル設定を見つけます。
2.VideoTogether のスクリプトをカスタムヘッダーに追加します。
3. 保存したら、ホームページに戻ると右下に VideoTogether ボタンが表示されます。
ここで、Alist のツールバーと VideoTogether がお互いにボタンを隠してしまうという問題があります。そのため、Alist のボタンの位置を変更するために、カスタムヘッダーまたはカスタムコンテンツを追加することができます。
copy<script>
document.addEventListener("DOMContentLoaded", () => {
const seAList = document.createElement("style");
seAList.innerHTML = `
.left-toolbar-box {
left: var(--hope-space-5);
right: auto;
}
`;
document.body.appendChild(seAList);
});
</script>
これにより、以下のような効果が得られます。これにより、問題が改善されます。
使用手順#
これで、Alist にさまざまなストレージを追加し、オンライン機能でビデオをプレビューし、ウェブページに組み込まれた VideoTogether を使用してビデオを同期することができます。
ただし、ビデオのプレビューはビデオの形式に大きく依存します。ビデオに複数の音声トラックがある場合や、形式が一般的でない場合、多くのビデオは音声がない場合があります（これが最も大きな使用上の問題です）。