Vue播放Nginx服务器视频

一、系统环境

---

selinux firewalld off

[root@nginx ~]# cat /etc/redhat-release
Red Hat Enterprise Linux Server release 7.5 (Maipo)

二、安装

---

1、 安装依赖

[root@nginx ~]# yum install -y pcre-devel gcc openssl-devel

2、nginx-rtmp-module下载

下载地址：https://github.com/arut/nginx-rtmp-module/tags

[root@nginx ~]# tar xf nginx-rtmp-module-1.2.0.tar.gz
[root@nginx ~]# ls
nginx-rtmp-module-1.2.0  nginx-rtmp-module-1.2.0.tar.gz

3、安装nginx

下载地址： http://nginx.org/download/

[root@nginx ~]# wget http://nginx.org/download/nginx-1.18.0.tar.gz
[root@nginx ~]# tar xf nginx-1.18.0.tar.gz
[root@nginx ~]# cd nginx-1.18.0/
[root@nginx nginx-1.18.0]# ./configure --prefix=/usr/local/nginx --add-module=/root/nginx-rtmp-module-1.2.0
[root@nginx nginx-1.18.0]# make && make install
[root@nginx nginx-1.18.0]# ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/

三、实现方式一（rtmp ）

---

1、修改nginx配置

[root@nginx nginx-1.18.0]# cd /usr/local/nginx/conf
[root@nginx conf]# vim nginx.conf
worker_processes  1;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;    #不可以修改
        chunk_size 4096;

        application vod {
            play /nginx/vod;
        }
    }
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2、检查配置文件

[root@nginx conf]# nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

3、启动nginx

[root@nginx conf]# mkdir /nginx/vod -p    ###创建视频存放路径
[root@nginx conf]# nginx
[root@nginx conf]# netstat -lntup|egrep "80|1935"
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      4970/nginx: master
tcp        0      0 0.0.0.0:1935            0.0.0.0:*               LISTEN      4970/nginx: master

4、vue播放代码

  "dependencies": {
    "videojs-flash": "^2.2.1",
    "vue-video-player": "^5.0.2",
  },

<template>
  <section class="video-box">
    <videoPlayer
      ref="videoPlayer"
      :options="videoOptions"
      class="vjs-custom-skin videoPlayer"
      :playsinline="true"
    />
  </section>
</template>
<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

export default {
  components: {
    videoPlayer
  },
  data () {
    return {
      videoSrc: '',
      // 视频播放
      videoOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        techOrder: ['flash', 'html5'],      // 兼容顺序
        sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
          type: 'http/hls',
          src: 'http://10.10.10.100/test.mp4'
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }
    }
  }
}
</script>
<style scoped>
.video-box {
  width: 1000px;
  padding: 20px;
}
</style>

四、实现方式二（http）

---

1、修改配置文件

[root@nginx conf]# cat nginx.conf
worker_processes  1;

events {
    worker_connections  1024;
}

#rtmp {
#    server {
#        listen 1935;
#        chunk_size 4096;
#
#        application vod {
#            play /nginx/vod;
#        }
#    }
#}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  10.10.10.100;
        location ~* \.flv$ {
            root /nginx/vod;
        }
        location ~* \.mp4$ {
            root /nginx/vod;
        }

        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2、重启nginx

[root@nginx ~]# nginx -s stop
[root@nginx ~]# nginx

3、vue代码

<template>
  <div>
    <video controls="controls" autoplay="autoplay">
      <source src="http://10.10.10.100/test.mp4" type="video/mp4" />
    </video>
  </div>
</template>

<script>
export default {
  name: "MovieAdd",
};
</script>

<style scoped></style>

4、查看结果