H5 video跨域问题
事情是这样的,今天上午下班前,朋友发我一个js文件,说视频不播放,核心代码大概是这样子的:
var player = document.createElement('video');
var source = document.createElement('source');
player['id'] = 'videoplayer';
player['class'] = 'video-js vjs-default-skin ';
player['controls'] = ' ';
player['poster'] = vPng;
player['preload'] = 'auto';
player['data-setup'] = '{"fluid": true}';
player['muted'] = 'true';
player['autoplay'] = 'true';
source['type'] = 'video/mp4';
source['src'] = vUrl; document.body.appendChild(player);
document.getElementById("videoplayer").appendChild(source);
朋友说,在浏览器上播放正常,但是在android浏览器,app的webview里也不正常。
我这边看了一下,也是只有一个封面而已,mp4文件响应200,返回100K以内的数据,response headers里面的Connection:Close。
我是谁,Copying and Pasting from Internet 技能点满了的人,
于是,发动了我的技能:
第一个看到了吧,google的devtool 结合Chrome使用,但是这货色iMac结合Chrome的,所以用Google的这个不大合适,
然后荐了我之前用过的weinre。
与好奇心和责任心无关,本着八卦与无聊的精神,我追着问结果,
追问结果到下午,好友上线告诉我结果:webview没有报错,代码也正常,就是不报错。
这时候,我无意之中刷新了一下页面,我了个擦,居然有了。
怎么回事?莫非是缓存问题?
clear browser cache, clear cookie, restart nodejs server。(用的nodejs做的静态文件服务器,file:的话会有一些其他的问题)
问题又粗线了:只有一个封面,毛都播放不了。
直接访问mp4文件,播放正常。
这尼玛是不是一个跨域问题啊?
于是将跨域的资源统统下载到我的Nodejs静态服务器,
将video的src路径改为本地服务器的相对路径,
Bingo!
一切正常得不能再正常了。
至此,
可以确定是一个跨域所导致的加载问题,
给video添加crossOrigin = '*';
没啥卵用。
response headers里面Access Allow Origin根本就没有,
于是跟朋友讲需要去资源服务器里面加一下配置。
但是,
这个不是他们公司的维护范围;
叫他下载到他们的服务器里面去,
马蛋,不鸟我。
于是,
我又发挥了我的第二个满点技能,
走偏门。
有什么元素可以绕过跨域限制的呢?
似乎有个iframe可以用。
科科。
于是在上面那段代码前面加上:
var iframe = document.createElement('iframe');
iframe['src'] = vUrl;
iframe['width'] = 580;
iframe['height'] = 434;
document.body.appendChild(iframe);
return;
搞定,跨你妹个蛋的域哇。
咩哈哈!!!
虽然问题看起来是解决了,
但是我告诉他最终解决方案不是这个,
因为你这么嵌入页面的话是非常危险的。
同时也不推荐大家去随便嵌入别人的网页到自己的应用中,
因为很危险哪。
正式的解决方案还是要靠去资源服务器添加跨域访问限制的配置。
最后是一张正常访问和不正常访问的请求响应的对比图:
很充实有趣有记录意义的一次bug解决体验。
H5 video跨域问题的更多相关文章
- PHP解决h5页面跨域
前端h5 页面请求后端接口会出现跨域, PHP 只需三行代码即可解决 //解决前端跨域(h5页面) header("Access-Control-Allow-Origin:*"); ...
- uni-app h5端跨域问题解决
例如我现在的项目运行在 http://localhost:8080,而我有个接口是 https://service.picasso.adesk.com/v1/wallpaper/album,发起请求就 ...
- vue.js及H5常见跨域问题解决方案
一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...
- h5请求跨域问题Access-Control-Allow-Origin解决跨域
访问后端接口报错:No 'Access-Control-Allow-Origin' header is present on the requested resource 解决: Access-Con ...
- Spring @CrossOrigin 通配符 解决跨域问题
@CrossOrigin 通配符 解决跨域问题 痛点: 对很多api接口需要 开放H5 Ajax跨域请求支持 由于环境多套域名不同,而CrossOrigin 原生只支持* 或者具体域名的跨域支持 所以 ...
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...
随机推荐
- Linux Shell : Test命令参数解析
格式: test conditions test -n string : string 不为空 test -z string : string 为空 test int1 -eq int2 : int ...
- 理解VMware虚拟机下网络连接的三种模式(如何配置虚拟机上网)
很多朋友都用vmware来测试不同的系统,我结合自己的经验谈一下对网络设置的理解,不对的地方请指正. bridge:这种方式最简单,直接将虚拟网卡桥接到一个物理网卡上面,和linux下一个网卡 绑定两 ...
- 在选定的数据源上未找到名为“TitleSub”的字段或属
在.NET开发过程中时常会遇到“在选定的数据源上未找到名为“TitleSub”的字段或属性”的错误”,导致这类错误的原因有很多,在我的项目中,详细情况是这样:1.有两个控件:DropDownList类 ...
- java泛型小问题
几年前当Java5还未正式发布的时候,看到过一些人写的介绍Tiger中的新特性,当时对我第一感觉冲击最大的就是泛型(generics)和注释(annotation),因为它们直接影响了我们编码的语法习 ...
- hdu_5806_NanoApe Loves Sequence Ⅱ(双指针)
题目链接:hdu_5806_NanoApe Loves Sequence Ⅱ 题意: 给你一段数,问你有多少个区间满足第K大的数不小于m 题解: 直接双指针加一下区间就行 #include<cs ...
- unix文件系统
转自here 我一向坚持的原则,那就是任何东西的根本性的,本质上的原理以及背后的思想都是及其简单的,所谓的复杂性都是优化与策略化的扩展带来的,正如TCP一样,UNIX的文件系统也不例外!我们必须知道, ...
- vs设计界面出现“建控件时出错 响应在此上下文中不可用”
使用VS2010设计Asp.net时出现: 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态.还请确保在应用程序配置的 \\ 节中包括 ...
- linux文件权限赋值
1修改权限 命令:chmod (change mode) 功能:改变文件的读写和执行权限.有符号法和八进制数字法. 选项:(1)符号法: 命令格式:chmod {u|g|o ...
- springmvc权限拦截器
配置文件spring-servlet.xml <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- PHP之音乐ID3扩展
不知道你有没有这样的经历,一些从网上下载的MP3音乐,文件名明明是01.02这样的序号,但播放时却能显示出歌曲的正确名称来,是不是有点奇妙? 这其实都是ID3在暗中相助 ID3,一般是位于一个mp3文 ...