使用Nginx代理访问服务器的.mp4文件,并使用Vue播放

悠悠 2024-03-24 14:14 41阅读 0赞

## 一、使用Docker部署单节点Nginx ##

### 1、在CentOS上安装部署Docker ###

请参考：[https://blog.csdn.net/yueyue763184/article/details/126776158?spm=1001.2014.3001.5502][https_blog.csdn.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

![0ecc8d4859a84889b836d587e3e9bd82.png][]

进入nginx0容器:

docker exec -it nginx0 /bin/bash

查看nginx.conf配置文件位置：

![cc56613deef14600a819d2d8411465ec.png][]

### 5、拷贝，修改**nginx.conf****文件** ###

exit或者Ctrl+D退出容器，然后拷贝配置文件：

cd /home/nginx
    docker cp nginx0:/etc/nginx/nginx.conf conf/nginx.conf

![e7f8b10c25a1460187e812f87befcb32.png][]

修改 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;
    	}
    }

![51564b7161e845028d29730b474ebcf9.png][]

在/home/nginx/www目录下创建images文件夹，并上传.mp4文件在其下

![b9bbd04aae0a4052b0679e6f4481a4bf.png][]

接下来就可以删除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

![5d5b562aa7c549a9a04b53c1756f119b.png][]

确保防火墙9001端口已经开了，就可以远程访问了：

![9b83b2171a2a4807bd3e289adf92afd2.png][]

## 二、在Vue中播放.mp4视频 ##

主要是使用video来播放

npm install video.js --save

index.vue

<template>
      <div>
        <span class="spheader">监控视频：</span>
        
        <div  v-for="item in videoUrl" class="sp">
          <video id="myVideo" ref="myVideo" controls class="shiping1 video-js vjs-big-play-centered">
            <source :src="item.url" type="video/mp4" >
          </video>
          
          <span class="time">{
       {item.time}}</span>
        </div>
      </div>
    </template>
    
    <script>
    import Video from 'video.js'
    import 'video.js/dist/video-js.css'
    export default {
      data() {
        return {
          playHandler: null,
          videoUrl: [
            {"url": 'http://ip:9001/images/222.mp4', "time": "2023-03-06 12:10:00"},
            {"url": 'http://ip:9001/images/333.mp4', "time": "2023-03-06 12:06:00"},
            {"url": 'http://ip:9001/images/222.mp4', "time": "2023-03-06 12:03:00"}
          ]
        }
      },
      updated() {
        // 初始化获取数据
        this.fetchVideoList(this.id)
        setTimeout(() => {
          this.initVideo()
        }, 300)
        this.playHandler.dispose()
      },
      async initVideo() {
        this.$nextTick(() => {
          this.playHandler = Video('myVideo', {
            // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            // 自动播放属性,muted:静音播放
            autoplay: 'muted',
            // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: 'auto',
            // 设置视频播放器的显示宽度（以像素为单位）
            width: '650px',
            // 设置视频播放器的显示高度（以像素为单位）
            height: '400px'
          })
        })
      },
    
      /**
       * @function  获取视频素材详情
       */
      async fetchVideoList(id) {
        const res = await materialApi.query({id})
        if (res.code === 0) {
          this.form = res.data
          this.$refs.myVideo.src = res.data.cosPath
          console.log(this.form, 'this.video.form', this.$refs.myVideo.src)
        }
      }
    }
    </script>
    
    <style>
    @import "./index.css";
    </style>

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;
    }

效果：

![0b035efda39c4de983b3f780d0d2fb8a.png][]

[https_blog.csdn.net_yueyue763184_article_details_126776158_spm_1001.2014.3001.5502]: https://blog.csdn.net/yueyue763184/article/details/126776158?spm=1001.2014.3001.5502
[0ecc8d4859a84889b836d587e3e9bd82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/07756c24c04e44eaba9e82405143010a.png
[cc56613deef14600a819d2d8411465ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a2892f27a92a443f82c112a6fd1e8df5.png
[e7f8b10c25a1460187e812f87befcb32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/22189ece0a214150b39e48dba42650c0.png
[51564b7161e845028d29730b474ebcf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5798e55a5b864a378a4db392b33a5fa1.png
[b9bbd04aae0a4052b0679e6f4481a4bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2a935192a7484c7ba6cc750606cf831f.png
[5d5b562aa7c549a9a04b53c1756f119b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b49736a44d304f7f887e2629301149ac.png
[9b83b2171a2a4807bd3e289adf92afd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f4dff3eb1f854045b51bc6e05ada2a49.png
[0b035efda39c4de983b3f780d0d2fb8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3b900050a8174288ad2650bb14cdb4fe.png