使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

作者:神秘网友 发布时间:2020-10-31 22:47:32

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

由于需求,需要提供浏览器播放 mp4 和 flv 视频功能。首先浏览器直接支持 flv 和 mp4 格式。只需要在对应的 WEB 服务上完成配置即可。

注意,我的需求是通过浏览器直接播放 MP4,而不是服务器提供 RTMP 功能,使用 RTMP 又是另外一种配置。

服务器环境

Ubuntu 18.04 + nginx 1.14.0。完整的环境如下。

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.5 LTS
Release:	18.04
Codename:	bionic
$ nginx -v
nginx version: nginx/1.14.0 (Ubuntu)

Nginx

如果已经安装 Nginx 可以跳过本步骤。如果没有,请使用以下命令:

sudo apt install nginx
sudo apt install nginx-extras

$ sudo vi /etc/nginx/sites-enabled/default

在 server 配置加增加如下:

        location ~ \.mp4 {
                root /data/movie;
                mp4;
        }
        location ~ \.flv {
                root /data/movie;
                flv;
        }

注意:root 表示对应的跟目录位置。

然后保存配置。

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

这样测试说明 nginx 配置是正确的。

$ sudo service nginx restart

验证

下面就是见证奇迹。我在 /data/movie 目录下有如下文件。

$ ls -al /data/movie/
total 85512
drwxr-xr-x 2 www-data www-data     4096 Mar  6  2020 .
drwxr-xr-x 7 root     root         4096 Oct 30 12:47 ..
-rw-rw-r-- 1 ubuntu   ubuntu   56532559 Mar  6  2020 Python3.mode1.mp4
-rw-rw-r-- 1 ubuntu   ubuntu   14278520 Mar  6  2020 Python3.mode2.mp4
-rw-rw-r-- 1 ubuntu   ubuntu   16740845 Mar  6  2020 Python3.mode3.mp4

打开浏览器,输入对应的 IP 地址,加上需要播放的 mp4 文件。如下图:

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

这样就可以正确播放出 MP4 文件了。

错误可能

最大的可能是你的浏览器上增加了自动下载功能。比如我用的 Firefox 有 IDM 插件,直接打开上面的 MP4 文件,就给 IDM 拦截了,开始自动下载功能。如下图。

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

解决方法:换浏览器,或者关闭 IDM 插件。

这个问题在浏览器的显示应该是找不到网页。请确认云主机是否打开配置端口。

验证平台

本方法已经在:阿里云主机、腾讯云主机和 Win10+WSL2 机器上测试过。

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放相关教程

  1. centos服务器挂载硬盘

    centos服务器挂载硬盘 适用与服务器添加新盘。 注意:挂载不会对旧盘项目有影响,新盘会被格式化 查看CDS磁盘 a.在没有分区和格式化CDS磁盘之前,执行df -h命令无法查看到CDS磁盘 df -h b.执行fdisk -l查看,红色框为CDS磁盘初始化前的信息。如下图所示。 fdi

  2. 如何在服务器上添加虚拟IP?看完原来如此简单!!

    如何在服务器上添加虚拟IP?看完原来如此简单!! 最近,有位小伙伴为了实现Nginx的高可用,在自己的服务器上搭建了一套Nginx集群,Nginx节点的服务器总共有3台。那么问题来了:如何对外只使用一个IP地址,通过某种策略来访问三个服务器节点上的Nginx?答案就

  3. 使用Vue和Spring Boot实现前端图片获取

    使用Vue和Spring Boot实现前端图片获取 前端通过后端请求图片数据也是很常见的业务需求,这里博主给大家演示一下。 前端: template div class=blog div class=gain img :src='data:image;base64,'+image button @click=gain()span获取图片/span/button /div

  4. 远程连接服务器的MySQL报错:2003-Can‘t connect to Mysql Serv

    远程连接服务器的MySQL报错:2003-Can‘t connect to Mysql Server on “sheepl.top“(10060 Unknow error) 第一步:检查mysql是否开启远程连接。 1.登录服务器数据库。 mysql -uroot -p 2.进入数据库 mysql use mysql; 3.查看数据库当前是否支持远程连接。 s

  5. 简单说明windows下安装nginx

    简单说明windows下安装nginx 环境:win10,nginx1.8.1。 1.1:下载 在这里下载安装包。 1.2:解压 解压到自定义的目录即可。 2.1:配置 因为nginx默认监听的是80端口,该端口一把会被使用,所以修改 nginx.conf 下的 listen 80; 修改为 listen 99; ,修改后如

  6. 如何将你的vue项目部署到服务器

    如何将你的vue项目部署到服务器 前置条件:服务器端安装nginx 如何安装nginx:https://blog.csdn.net/qq_35888875/article/details/80937731 npm run build 打包后项目底下生成一个dist文件夹 运行ps -ef|grep nginx,查看你的nginx安装的位置 ps -ef|grep ng

  7. Angular里useExisting和useClass的使用场景

    Angular里useExisting和useClass的使用场景 StackOverflow上的一个帖子:https://stackoverflow.com/questions/45152995/useclass-vs-useexisting 从上图能看出,所有注入的示例都通过factory方法返回,只是factory方法的实现有所差异。 As we can see in the

  8. IntelliJ IDEA使用技巧,复制字符串连接文本到剪切板

    IntelliJ IDEA使用技巧,复制字符串连接文本到剪切板 比如有以下代码,字符串中是一个查询男生、女生人数的 sql public class Test { public static void main(String[] args) { // 查询男生、女生人数 String sql = select sex,count(*) + from student + gr