哩哔哩哔

The purpose of this article is to target users who want to use Alist and VideoTogether at the same time. The tutorial is mainly aimed at user experience, so this article is relatively more beginner-friendly. Of course, it is best if users have already used Alist and VideoTogether.

Example experience address https://libilibi.eu.org/

Why use Alist and VideoTogether#

The main reason is that although VideoTogether can support most video websites, the user experience on major video websites is not good. Legitimate websites usually require membership, while pirated websites often encounter loading failures and are very unstable. Therefore, it is necessary to use a "self-managed video website" for synchronization. Using Alist for video playback solves this problem.

At the same time, Alist can add VideoTogether to the website through global custom headers. This eliminates the need for every user to install the VideoTogether plugin. Instead, synchronization can be achieved by simply opening the link.

Deploying Alist#

This part mainly refers to the official documentation of Alist. It is basically based on the Docker method in the official documentation. This article installs it on a VPS that already has docker-compose installed (this part can refer to this link: Install the Compose plugin).

Of course, Alist can also be deployed in strange places like Synology routers, etc. For specific instructions, please refer to the official Alist documentation.

Below is the deployment process.

1. Connect to the VPS via SSH.

2. Copy the official docker-compose file from the documentation to the 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'

After writing the docker-compose file, use the following command to start it. For some VPS providers in China, you may need to pay attention to the port opening situation. You may need to configure firewall rules or disable the firewall.

copydocker-compose up -d

4. This will start the container, which can be checked using the following command.

copydocker ps

5. Use the following command to view the admin password.

copydocker exec -it alist ./alist admin

6. Next, you can access it by IP:5244. If there are no issues, you can log in to the backend with the admin username and the password obtained above.

Adding VideoTogether to the website#

According to the documentation of VideoTogether,

you only need to add one script.

copy<script src="https://2gether.video/release/extension.website.user.js"></script>

1. Go to the Alist backend and find the global settings.

2. Add the VideoTogether script to the custom headers.

3. After saving, you can see the VideoTogether button in the lower right corner of the homepage.

One drawback here is that the Alist toolbar and VideoTogether actually block each other's buttons. So here, we can add another custom header or custom content to modify the position of the Alist button.

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>

It will look like the image below. This improves the situation.

Workflow#

At this point, you can add various types of storage on Alist and use the online preview video function, along with the VideoTogether provided on the webpage, to synchronize watching videos.

However, it is important to note that the preview video depends on the format of the video. If your video has multiple audio tracks or the format is not very mainstream, many videos may have no sound (which is the biggest issue in terms of usage).