h5的video标签src使用http协议的url却一直重定向到https的

问题描述：

在开发web网站的时候，我们网站的网址是https协议的网址，但是当我使用到h5的video标签时，后端提供给我的是http协议的资源的url，于是出现了视频加载错误的情况，然后我打开chrome的network看了一下，发现首次发送的http的request返回了307状态码（重定向的状态码）于是浏览器重新请求重定向后的url，结果请求失败（找不到资源）。查看了一下重定向后的url，竟然把我的http请求变成了https的请求！？具体请看图：

 

原因1： Nginx等静态资源服务器的配置问题

产生问题的原因可能是nginx等静态资源服务器配置了端口转发，使得原本的http请求重定向为https的请求，从而导致url指向的资源不存在导致加载失败。

解决办法：配置一下Nginx等资源服务器的配置，让其支持https的请求，或者停掉自动转发到https即可，具体内容百度一下就好了，网上很多办法。

原因2：视频的资源服务器和网站具有相同的顶级域名、二级域名和三级域名（本次的问题的原因）

如果你的网址是https的，在这个页面却进行了一个http的请求，此时称之为mixed-content（混合内容），因为出于安全性考虑，浏览器会进行警告或者拦截（一般来说只是警告）。如果是被拦截了，根据提示设置一下浏览器应该就好了，具体设置百度搜索应该也能查到，因为浏览器五花八门，在这里就不一一赘述了。

还有一种情况就是，比如你的网站的网址是 https://demo.com    ; 你的视频的url是  http://xxx.demo.com/xxx.mp4, 它们具有共同的demo.com，这就造成了浏览器认为这个视频资源也应该和网址一样是使用的https的协议，浏览器就会重定向你的视频url。

解决办法：更改静态资源服务器的域名或者改网站域名，使其不在一个域名下面即可。或者更改静态资源服务器支持https的资源请求，又或者更改网站域名为http即可。