标签搜索

目 录CONTENT

文章目录

在VPS或者飞牛云NAS上用Docker搭建一个在线m3u8视频播放器

yyzq
2025-08-26 / 0 评论 / 1 点赞 / 55 阅读 / 1,595 字

前言

随着视频点播的普及,m3u8 流媒体格式已经成为网络视频播放的主流之一。但很多时候,我们想要快速测试一个 m3u8 地址,却苦于没有合适的播放器,或者本地环境配置繁琐。为了解决这个问题,我用 AI 开发了一个在线 m3u8 视频播放器,支持直接在浏览器中播放视频,简单高效,无需额外安装软件。

今天,我将带大家实操演示如何在 VPS 或者飞牛云 NAS 上,通过 Docker 部署这个在线播放器。整个过程只需几条命令,就能让你的服务器秒变视频播放平台,方便测试和日常使用。

✨ 功能特点

  • 🎥 在线播放 m3u8 视频流:无需插件,直接播放 HLS 视频
  • 快速加载:优化播放体验,减少等待时间
  • 📱 多端适配:支持 PC / 平板 / 手机响应式布局
  • 🌙 黑夜模式:一键切换浅色 / 深色主题
  • 🎨 自定义主题色:支持自定义播放器主色调
  • 📜 播放历史:自动保存最近播放记录,可点击快速播放
  • 🔒 安全可靠:不存储任何视频内容

项目图片

以下是与该项目相关的一些图片:
image-1756188530928

demo

https://m3u8.itellyou.cf/

部署方法

使用Docker安装

本教程使用docker的方式安装部署,简单便捷
164b6ac419e23bc5390dc46601a202bf

准备条件

1)一台服务器或者NAS

我们使用飞牛云NAS和VPS来演示
需要vps的可以看以下信息
莱卡云官网

2)本项目使用到的github

https://github.com/yyzq-cf/m3u8-online-player
image-1756188611423
目前只有1个 stars
更多功能或者二次修改可以访问GitHub

3)提前下载好源码html文件

m3u8源码

4)域名(可选)

域名可以根据自己的需求绑定

①《飞牛NAS上搭建》

开始之前
在项目目录新建一个html目录
然后将下载好的
index.html文件放入html 中
image-1756189062972

然后直接在docker新增一个compose项目即可
新建项目:

m3u8-web

compose配置如下:

services:
    nginx-php-m3u8:   #服务名,可以自定义
        container_name: nginx-php-m3u8    #容器名,可以自定义
        ports:
            - '3388:80'   # 冒号:左边的3388可以改成任意vps上未使用过的端口,冒号右边是本docker镜像里的端口
        environment:
            - PUID=0    # 用户ID,在终端输入id可以查看当前用户的id默认是0root
            - PGID=0    # 组ID同上
            - TZ=Asia/Shanghai  #时区,可以自定义
        restart: always    #开启自启动其他选项看以下备注
        volumes:
           - './html:/usr/share/nginx/html' #目录映射,冒号:左侧可以更改本地的目录(这里用html),右侧是对应的容器的目录(这里对应容器里的nginx的网站目录)
        image: gindex/nginx-php   #镜像名一般都是使用的哪个镜像就写哪个镜像。

启动即可
image-1756189702026
正常启动
image-1756189780392
飞牛云的
ip:3388
端口即可打开
image-1756189806828

补充docker可用的镜像仓库

国内如果无法拉取镜像的可以使用
仓库1

https://proxy.1panel.live/

仓库2

https://docker.1panel.top/

仓库3

https://mirror.azure.cn/

仓库4

https://hub.rat.dev/

仓库5

https://docker.1ms.run

仓库6

https://docker.itelyou.cf/

仓库7

https://abc.itelyou.cf/

仓库8

https://docker.ywsj.tk/

②《vps上搭建》

一、Docker环境部署

在vps安装docker和docker-compose
Docker官方安装文档(英文)
https://duan.yyzq.eu.org/docker-001
Docker-Compose官方安装文档(英文)
https://duan.yyzq.eu.org/docker-002
Centos安装Docker和Docker-compose(中文)
https://duan.yyzq.eu.org//03
Ubuntu安装Docker和Docker-compose(中文)
https://duan.yyzq.eu.org//04

推荐直接用一键脚本

docker安装脚本

bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)

docker-compose安装脚本

curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

二、创建docker-compose.yml文件

mkdir m3u8-web;cd m3u8-web;mkdir html #创建一个目录,并进入此目录,并创建一个html目录

然后将下载好的html文件放入html目录中

然后再新建docker-compose.yml

vim docker-compose.yml
services:
    nginx-php-m3u8:   #服务名,可以自定义
        container_name: nginx-php-m3u8    #容器名,可以自定义
        ports:
            - '3388:80'   # 冒号:左边的3388可以改成任意vps上未使用过的端口,冒号右边是本docker镜像里的端口
        environment:
            - PUID=0    # 用户ID,在终端输入id可以查看当前用户的id默认是0root
            - PGID=0    # 组ID同上
            - TZ=Asia/Shanghai  #时区,可以自定义
        restart: always    #开启自启动其他选项看以下备注
        volumes:
           - './html:/usr/share/nginx/html' #目录映射,冒号:左侧可以更改本地的目录(这里用html),右侧是对应的容器的目录(这里对应容器里的nginx的网站目录)
        image: gindex/nginx-php   #镜像名一般都是使用的哪个镜像就写哪个镜像。

三、执行容器运行命令

docker-compose up -d #运行容器
docker-compose ps  #查看是否开启成功

正常启动如下所示

docker-compose ps
NAME             IMAGE              COMMAND      SERVICE          CREATED         STATUS         PORTS
nginx-php-m3u8   gindex/nginx-php   "/init.sh"   nginx-php-m3u8   5 seconds ago   Up 4 seconds   0.0.0.0:3388->80/tcp, [::]:3388->80/tcp

四、打开web页面使用

成功以后需要打开自己相应的端口(8082)防火墙就可以web端访问了
打开自己VPS/或者飞牛云NAS的ip加端口就可进入初始化页面

http://ip:3388

image-1756190292558

接下来就可以看自己的html视频测试了
自由发挥

五、绑定域名

如需绑定域名的自行绑定
绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch
绑定完域名配置好证书就可以用域名来访问了

有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我

欢迎关注我们的微信公众号!
微信公众号

1

评论区