用FastDFS+Nginx实现简单的在线视频播放程序

山腰间飘逸的红雨
1,012 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天

使用FastDFS作为分布式文件系统用于存储视频文件，SpringBoot用于编写接口，nginx用于访问FastDFS。

本程序只用于学习FastDFS搭配Nginx的使用，对于视频播放的更深入的技术不做讲述。

FastDFS

FastDFS是一个分布式的文件存储系统，提供了对文件上传、下载、访问的功能。

手把手教你FastDFS - 掘金 (juejin.cn)

本程序的FastDFS没有做分布式的集群，是单体结构。

我个人的FastDFS的存储目录，其中dM265...开头的那个视频文件是将要访问的视频文件。

image.png

Nginx

FastDFS 4.0.5版本后，已经移除了自带的HTTP服务，所有需要手动搭建HTTP服务。当前采用NGINX配合FastDFS的方案，给外部提供连接FastDFS Client的功能，以执行上传和下载。

详细的Nginx与FastDFS配置可参考

Nginx 整合 FastDFS 实现文件服务器 - 掘金 (juejin.cn)

配置好Nginx之后就可以使用Nginx访问FastDFS了

如图所示，直接访问FastDFS中的视频文件

使用 Nginx地址:Nginx端口/文件所在目录 即可访问到该文件，例如

当前我的Nginx端口是80，ip是192.168.1.112
文件地址是group1/M00/00/00/dM265mP2DdiAOmMDBi6hbgVNgpo398.mp4

所以用“192.168.1.112/group1/M00/00/00/dM265mP2DdiAOmMDBi6hbgVNgpo398.mp4”即可在浏览器中直接打开该网址

image.png

image.png

结合网页

使用一个非常简陋的页面用于展示基本功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>videoTest</title>
    <style>
      video {
        width: 500px;
      }
    </style>
  </head>
  <body>
    <video
      src="http://192.168.1.112/group1/M00/00/00/dM265mP2DdiAOmMDBi6hbgVNgpo398.mp4"
      controls="controls"
    ></video>
  </body>
</html>

image.png

使用<video>标签展示视频内容。
src是指要访问的视频链接，也就是Nginx调用FastDFS视频文件的链接。

当前的src是写死的。在实际开发中，可以根据当前的业务情况，向服务器后台发送一个请求src链接的请求，从而实现了其他视频的播放。

当然，FastDFS不仅可以用于存储视频，还可以存储其他文件。例如创建一个云端的数据存储服务器，大致的思路与这个差不多。

avatar
文章
阅读
粉丝