nginx开发 | video.js报错：由于服务器或网络故障或不支持格式，无法加载媒体（已解决）

The media could not be loaded, either because the server or network failed or because the format is not supported.

翻译： 由于服务器或网络故障或不支持格式，无法加载媒体

解决问题的方案及思路（文章最后有惊喜！！）

1.根据报错提示，非常直观的问题就是确认自己的视频格式，所以先看看自己发布的视频格式是否存在问题。
2.出现这个问题最多的是自己配置的文件路径出现问题，所以查看自己在前端页面配置的url指向是否存在问题，可以F12查看，文件路径出错，有非常明显的404，而且还是爆红的。
3.这些都没有问题就有可能是部署服务器的配置问题了，本次作者用的就是nginx部署的，配置如下：

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
	 upstream  cms_server_pool{
		 server  127.0.0.1:31001  weight=10;
	 }
	 upstream static_server_pool{
		 server 127.0.0.1:91 weight=10;
	}
	upstream dynamic_portal_server_pool{
		server 127.0.0.1:10000 weight=10;
	}
	upstream search_server_pool{
		server 127.0.0.1:40100 weight=10;
	}
	upstream video_server_pool{
		server 127.0.0.1:90 weight=10;
	}
	#前端ucenter
	upstream ucenter_server_pool{
		#server 127.0.0.1:7081 weight=10;
		server 127.0.0.1:13000 weight=10;
	}
	 server {
            listen       91;
            server_name localhost;
            location /static/company/ {
                    alias   E:/wsworkspance/yh-ui-pc-teach/static/company/;
			}
			location /static/teacher/ {
                alias   E:/wsworkspance/yh-ui-pc-teach/static/teacher/; 
				}
			location /static/stat/ {
					alias   E:/wsworkspance/yh-ui-pc-teach/static/stat/;
					}
			location /course/detail/ {
					alias  E:/wsworkspance/yh-ui-pc-teach/static/course/detail/;
					}
			#分类信息
			location /static/category/ {
				alias E:/wsworkspance/yh-ui-pc-teach/static/category/;
			}
			
        }
		server {
			listen 90;
			server_name localhost;
			location /video/ {
				alias   E:/hls/;
			}
		}		
		map $http_origin $origin_list{
			default http://www.wws.com;
			"~http://www.wws.com" http://www.wws.com;
			"~http://ucenter.wws.com" http://ucenter.wws.com;
			}
		server {
			listen       80;
			server_name video.wws.com;
			location /video {
				proxy_pass http://video_server_pool;
				add_header Access-Control-Allow-Origin $origin_list;
				#add_header Access-Control-Allow-Origin *;
				add_header Access-Control-Allow-Credentials true;
				add_header Access-Control-Allow-Methods GET;
				} 
		}
		server {
			listen       80;
			server_name ucenter.wws.com;
			#个人中心
			location / {
				proxy_pass http://ucenter_server_pool;
				}
		}
    server {
        listen       80;
        server_name  www.wws.com;
		ssi on;
		ssi_silent_errors on;

        location / {
            alias   E:/wsworkspance/yh-ui-pc-static-portal/;
            index  index.html;
        }
		 location  /cms/preview/  {
			 proxy_pass http://cms_server_pool/cms/preview/;
		 }
		 location /static/company/ { 
				proxy_pass http://static_server_pool;
		} 
		location /static/teacher/ { 
			proxy_pass http://static_server_pool;
		} 
		location /static/stat/ { 
			proxy_pass http://static_server_pool;
		} 
		location /course/detail/ { 
			proxy_pass http://static_server_pool;
		}
		location /static/img/ {  
			alias   E:/wsworkspance/yh-ui-pc-static-portal/img/;
		} 
		location /static/css/ { 
			alias E:/wsworkspance/yh-ui-pc-static-portal/css/;
			} 
		location /static/js/ { 
			alias E:/wsworkspance/yh-ui-pc-static-portal/js/; 
		} 
		location /plugins/videojs/ { 
			alias E:/wwsworkspace/eduUI01/yh-ui-pc-static-portal/plugins/videojs/; 
		}
		location /static/plugins/ { 
			alias	E:/wsworkspance/yh-ui-pc-static-portal/plugins/;
			add_header Access-Control-Allow-Origin http://ucenter.wws.com;
			add_header Access-Control-Allow-Credentials true;
			add_header Access-Control-Allow-Methods GET;
		}
		location ^~ /course/search { 
			proxy_pass http://dynamic_portal_server_pool; 
		} 
		#后端搜索服务
		location /openapi/search/ { 
			proxy_pass http://search_server_pool/search/; 
		} 
		#分类信息
		location /static/category/ { 
			proxy_pass http://static_server_pool;
		}
		#开发环境webpack定时加载此文件
		location ^~ /__webpack_hmr {
			proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;
		}
		#开发环境nuxt访问_nuxt
		location ^~ /_nuxt/ {
			proxy_pass http://dynamic_portal_server_pool/_nuxt/;
		}

    }


}

对于nginx配置需要知道：监听的端口号+配置的路径+实际文件地址，都要匹配的上。
对于初学者：干货点击下方，是一位大佬总结的，非常不错

https://www.cnblogs.com/knowledgesea/p/5175711.html
点击跳转