Html+video.js+nginx播放m3u8视频

最新推荐文章于 2022-08-14 16:10:08 发布

殷长庆

最新推荐文章于 2022-08-14 16:10:08 发布

阅读量1.9k

点赞数

文章标签： linux nginx m3u8

本文链接：https://blog.csdn.net/anshichuxuezhe/article/details/113003605

版权

本文介绍了如何配置Nginx以允许跨域访问，特别是在处理视频资源时，通过设置`add_header`指令添加了必要的CORS头。同时，展示了HTML5页面播放m3u8视频的代码，包括引用的样式和脚本，以及video标签的使用。

摘要由CSDN通过智能技术生成

一、配置nginx，需要配置一下允许跨域访问

location /v     {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET';
  root /;
  rewrite ^/v/(.*)$ /home/video/$1 break;
  limit_rate_after 5m; #缓冲5M数据
  limit_rate       400k; #超过5M后按400K限制下载速度
}

二、html代码

<!DOCTYPE HTML>
<html>
<body>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<video id="myVideo" width='500' height="250" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"  data-setup='{}'>    
      <source id="source" src="http://192.168.1.5/v/input.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>