使用videojs访问m3u8文件时的跨域问题

最新推荐文章于 2024-07-31 09:57:55 发布

track sun

最新推荐文章于 2024-07-31 09:57:55 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端运维 ViewUI

原文链接：http://www.cnblogs.com/FightingJia/p/8194273.html

本文介绍如何解决阿里云CDN上的M3U8文件在使用video.js和videojs-contrib-hls.js播放时出现的跨域问题。通过设置HTTP头部信息可以有效避免跨域错误，实现视频资源的正常加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我访问的是阿里云上cdn的m3u8地址，使用video.js和videojs-contrib-hls.js 播放视频时，提示跨域。

原因是阿里云的资源不允许跨域访问，以下为解决办法：

阿里云→产品与服务→CDN→设置HTTP头

点“确定”

然后，再去你的页面播放视频，就可以了。

转载于:https://www.cnblogs.com/FightingJia/p/8194273.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

track sun

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue中使用videojs播放m3u8格式的视频

qq_42905523的博客

04-25

890

1.安装videojs npm install --save video.js 2.使用 <template> <div class="video-box"> <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" ></video> </di

videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...

weixin_39858245的博客

01-12

2436

总结：说明：测试环境：本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器：VideoJs直播：1、阿里云直播，需要CDN设置HTTP头2、本地直播需要设置直播访问服务器的头部信息(本地为Nginx)add_header 'Access-Control-Allow-Origin' '*'always;add_header'Access-Control-Allow-Credenti...

参与评论您还未登录，请先登录后发表或查看评论

videoJs+ hlive JS实现m3u8格式播放

03-17

videoJs+ hlive JS实现m3u8格式播放

视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总

似水流年

12-18

1万+

video.js支持m3u8格式直播 https://www.cnblogs.com/saysmy/p/6429835.html 为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口...

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

Cinway的专栏

07-16

2万+

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/...

videojs CORS 跨域失败无效 ,添加 add_header Access-Control-Allow-Origin *；无效

面朝大海，春暖花开

12-05

3082

videojs CORS 跨域失败无效 ,添加 add_header Access-Control-Allow-Origin *; 无效

H5的video标签跨域.HTML的video标签跨域_跨域ajax

12-24

H5的video标签跨域.HTML的video标签跨域我们都知道HTML video标签能播放视频但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?

vue通过video.js解决m3u8视频播放格式的方法

12-10

今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用...

Vue结合Video.js播放m3u8视频流的方法示例

01-19

然后，我们需要引入videojs的css文件，例如在main.js中引入 import 'video.js/dist/video-js.css' 接着，我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls' 指定...

videojs对hls直播和点播的支持m3u8

软件需要灵魂

06-15

2209

纠正大家对video.js支持hls使用方式的误区，已直接支持hls，完美支持加密m3u8

html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）

11-30

html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）。

js跨域调用

11-19

本实例是JS跨域调用webservice！

[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls

Tinywan

04-11

2934

 DEMO地址：https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS文件，直接使用 <video id=example-video width=600 height=300 class="video-js vjs-d...

iframe跨域没有权限_浅谈跨域威胁与安全

weixin_39882317的博客

11-30

473

WEB前端中最常见的两种安全风险，XSS与CSRF，XSS，即跨站脚本攻击、CSRF即跨站请求伪造,两者属于跨域安全攻击，对于常见的XSS以及CSRF在此不多谈论，仅谈论一些不太常见的跨域技术以及安全威胁。一、域域，即域名对应的网站。不同的域名对应的不同的网站，相同的域名不同的端口也对应的不同的网站，因此，域，从字面意思以及实质意思都为空间，所以在web中空间即代表的是网站。二、同源策略(SOP...

播放器播放m3u8提示跨域错误

热门推荐

chenwuai的专栏

11-08

3万+

web播放m3u8文件提示错误解决方案 1，添加crossdomain.xml 播放器跨域访问时需要添加策略文件，即在视频播放链接所在域名的根目录下添加 crossdomain.xml 文件，其中添加播放器所在域名的权限。例如： http://test1.com/app/test.m3u8需要添加http://test1.com/crossdomain.xml <?xml ...

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

水痕

06-06

7021

文件存放在服务器地址为`/home/video-api/public/uploads/video。目录的后面，最终的访问服务器上的地址是。中匹配到规则,会直接将当前请求的。代码里面输入视频地址。

vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin

海贼王某人的博客

07-31

1992

起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”

video跨域

qq_25253991的博客

08-13

1万+

在页面里面使用了video标签来播放视频，在低版本的chrome中正常播放，但是在76版本的chrome中报错Cross-Origin Read Blocking (CORB) blocked cross-origin response 一、问题描述： video标签播放视频，在76版本chrome中报跨域访问错误。二、问题定位：看到这个内容首先想到的是，这个资源跨域被浏览器同源策略限制访...

js跨域

hrecho的专栏

03-14

368

js跨域指的是通过js在不同的域之间进行数据传输或通信一、前端与前端跨域（主域相同）在项目中经常会出现这种问题，比如M站中的视频课页面，在html中嵌套了一个iframe（里面是video视频），本身的域名是 m.genshuixue.com，iframe的域名是 www.genshuixue.com；现在我们需要在页面底部做一个按钮，点击时让iframe中的video开始播放。在这种情况下，两个...

H5 videojs 读取m3u8