使用Nginx代理访问服务器的.mp4文件,并使用Vue播放
一、使用Docker部署单节点Nginx
1、在CentOS上安装部署Docker
请参考：https://blog..net/yueyue763184/article/details/126776158?spm=1001.2014.3001.5502
2、拉取最新版Nginx镜像
docker pull nginx
3、创建后面需要映射的文件夹
mkdir -p /home/nginx/www /home/nginx/logs /home/nginx/conf
4、先启动预备Nginx,仅仅用于获取配置文件
docker run -d -p 9001:80 --name nginx0 -v /home/nginx/www:/usr/share/nginx/html -v /home/nginx/logs:/var/log/nginx nginx
进入nginx0容器:
docker exec -it nginx0 /bin/bash
查看nginx.conf配置文件位置：
5、拷贝，修改nginx.conf文件
exit或者Ctrl+D退出容器，然后拷贝配置文件：
cd /home/nginx
docker cp nginx0:/etc/nginx/nginx.conf conf/nginx.conf
修改 nginx.conf 配置文件：
vim conf/nginx.conf
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
server {
listen 80;
server_name localhost;
charset utf-8;
location /images/ {
alias /home/nginx/www/images;#ok
autoindex on; 显示索引
autoindex_exact_size on; 显示大小
autoindex_localtime on; 显示时间
}
error_page 404 /404.html;
}
}
在/home/nginx/www目录下创建images文件夹，并上传.mp4文件在其下
接下来就可以删除nginx0,重新创建运行一个容器nginx:
docker stop nginx0
docker rm nginx0
docker run -d -p 9001:80 --name nginx -v /home/nginx/www:/usr/share/nginx/html -v /home/nginx/logs:/var/log/nginx nginx
确保防火墙9001端口已经开了，就可以远程访问了：
二、在Vue中播放.mp4视频
主要是使用video来播放
npm install video.js --save
index.vue
index.css
.sp{
margin: 30px 0 0 30px;
width:350px;
height:250px;
float:left;
}
.shiping1{
border: 2px solid black;
width: 100%;
height: 200px;
float:left;
}
.spheader{
color: #254765;
font-size: 18px;
position: absolute;
left: 220px;
top: 70px;
}
.time{
color: #254765;
position: relative;
top: 10px;
}
效果：
