解决video.js使用以后m3u8无法访问的跨域问题

最新推荐文章于 2024-05-09 18:19:42 发布

潭池先生

最新推荐文章于 2024-05-09 18:19:42 发布

阅读量1.9w

点赞数 8

本文链接：https://blog.csdn.net/Cinway/article/details/96133659

版权

Tomcat服务器在192.168.2.111，编写了页面调用：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>video.js</title>
<meta charset="utf-8">
<link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
</head>
<script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<body>
   <video id="my-player" class="video-js" controls>
       <source src="http://192.168.2.112:8080/hls/1000246_2_2.m3u8" type="application/x-mpegURL">
       <p class="vjs-no-js">not support</p>
   </video>
   <script type="text/javascript">
       var player = videojs('my-player', {
           width : 400,
           heigh : 200
       });
   </script>
</body>
</html>

在主机192.168.2.112用了nginx搭建hls流媒体服务器，生成了m3u8，但是用video.js访问的时候出现提示：

Access to XMLHttpRequest at 'http://192.168.2.112:8080/hls/1000246_2_2.m3u8' from origin 'http://localhost:9999' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

因为Tomcat的访问URL里是：

http://localhost:9999/xxxx/hls.html或者http://192.168.2.111:9999/xxxx/hls.html，和m3u8所在192.168.2.112域名不一致。

解决办法，配置112上的nginx，nginx.conf（蓝色是新增）：

worker_processes 1;

error_log logs/error.log info;

events {
worker_connections 1024;
}

rtmp {
server {
listen 1935;

application live {
live on;
}

application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 8s;
}
}
}

http {
server {
listen 8080;

location / {
root html;
}

location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}

location /stat.xsl {
root html;
}

location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
}
}

潭池先生

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
解决video.js使用以后m3u8无法访问的跨域问题

Tomcat服务器在192.168.2.111，编写了页面调用：<!DOCTYPE html><html lang="en" dir="ltr"><head><title>video.js</title><meta charset="utf-8"><link href="https://unpkg.com/...
复制链接

扫一扫