处理前端访问m3u8视频文件出现跨越问题

8月前作者：水痕01 分类：Toy博客阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了处理前端访问m3u8视频文件出现跨越问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、后端模板渲染的方式,不需要处理，不会存在跨域问题

二、如果是前后端分离项目在nginx中配置跨域

1、m3u8文件存放在服务器地址为`/home/video-api/public/uploads/video

2、修改nginx的配置

location /uploads/video {
	types {
	   application/vnd.apple.mpegurl m3u8;
	   video/mp2t ts;
	}
	root /home/video-api/public;
	add_header Cache-Control no-cache;
	# 加上这句可以处理跨域
	add_header Access-Control-Allow-Origin *;
}

3、客户端在js代码里面输入视频地址http://【ip或者域名】/uploads/video/1686034066126185.m3u8
4、解析
当前前端请求uploads/video/xx文件的时候,到了nginx中匹配到规则,会直接将当前请求的uploads/video/xx拼接到nginx中配置的root目录的后面，最终的访问服务器上的地址是/home/video-api/public/uploads/video/xx文章来源地址https://www.toymoban.com/news/detail-706447.html

到了这里，关于处理前端访问m3u8视频文件出现跨越问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

ffmpeg 下载网上m3u8的视频文件

FFmpeg 是一个音视频领域使用最广泛的跨平台开源库。由C语言编写，但广泛的为 C/C++、C#、Java、Python 等主流编程语言所调用。它集合了几乎所有的编码解码库与流协议，几乎能完美处理音视频开发领域的所有需求。方式一：源码安装 FFmpeg 通过编译源码安装 FFmpeg 的优点是可

2023年04月09日
浏览(34)
前端实现H265编码的m3u8视频流播放

前言视频监控是智慧城市、智慧园区等WebGIS类系统中最为常见的硬件对接设备，最常用的监控视频流格式为m3u8格式，但是m3u8格式通常都是h.265编码格式的，我搜遍了几乎所有前端视频播放插件，几乎普通的播放器插件都不支持h.265格式的视频编码。本文就带领大家了解H265视

2024年01月18日
浏览(43)
【vue】前端页面点击按钮弹窗播放m3u8格式视频

最终效果： 1.表格操作列 2.initVideo方法 3.弹出层代码 4.showAll_dialog样式 5.第2步跳转的video.html页面代码，用dplayer播放的，放在项目根目录的public文件夹即可

2024年02月04日
浏览(41)
前端vue播放m3u8、flv、mp4视频的方法

安装依赖 npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件页面引入插件页面中的使用简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。开源地址: https://github.com/Bilibili/flv.js/ 安装依

2024年02月13日
浏览(49)
视频网站的工作原理--＞m3u8视频文件的提取与解析（理论）

目录一、视频网站的工作原理二、抓取视频步骤 2.1、找到m3u8文件 2.2、把m3u8下载到ts文件 2.3、ts文件合并为mp4文件古老的视频网站的视频一般是在源码放一个video src=\\\"xxx.mp4\\\"/video，用户点击播放视频，会跳转到src的连接进行视频资源的获取进行播放。缺点：视频

2024年02月13日
浏览(27)
在AWS Lambda中使用FFmpeg处理m3u8视频流

在直播里领域，我们经常需要对视频流进行处理。FFmpeg则是该领域中处理的利器。这篇文章，我们将以视频流截图为例，讲解如何在AWS Lambda中对m3u8视频流进行截图。因为Lambda是无服务架构，其本地存储是不可靠的，于是最后我们需要将截图文件上传S3桶。这块的方案可以见

2024年02月03日
浏览(49)
python 爬虫 m3u8 视频文件加密解密整合mp4

完整代码如下： 1. 认识m3u8文件 m3u8 的结构详细分析可以看这个链接m3u8 文件格式详解 - 简书 (jianshu.com)，这里我们只简要介绍一下；相信无论多小白都应该知道如何打开开发者模型解析得到下面的结果；要注意的是，只有预览里面包含了 ts 信息的才算是我们需要的 m3u8 文件

2024年02月20日
浏览(44)
抓取m3u8视频

视频url：https://www.9meiju.cc/mohuankehuan/shandianxiadibaji/1-1.html 打开网址分析当前视频是由多个片段组成还是单独一个视频如果是一个单独视频，则找到网址，直接下载即可，如果为多个片段的视频，则需要找到片段的文件进行处理，本案例以m3u8为例找到m3u8文件后进行下载，下载

2024年02月11日
浏览(42)
「Python｜音视频处理｜场景案例」如何使用ffmpeg下载m3u8视频到本地并保存成mp4

本文主要介绍如何使用ffmpeg批量下载视频到本地并保存成指定格式。当我们希望将网页上的视频下载到本地的时候，我们可能获取到的视频地址是指向 .m3u8 格式的，当视频多的时候，手动下载并使用工具转换格式就显得工作量过大。 ffmpeg 是一个强大的音视频处理工具，具体

2024年02月16日
浏览(62)
Scrapy 爬取m3u8视频

爬取ts文件样式合成的MP4文件视频地址： [在线播放我独自升级第03集 - 高清资源](https://www.physkan.com/ph/175552-8-3.html) 这里任务目标很明确就是找m3u8文件打开浏览器进入开发者模式F12 搜索m3u8文件查看响应内容含有ts文件的m3u8文件再次查看标头地址即可 https://leshiyuncdn

2024年04月15日
浏览(25)