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可以用。
科科。
于是在上面那段代码前面加上:
1 2 3 4 5 6 | var iframe = document.createElement( 'iframe' ); iframe[ 'src' ] = vUrl; iframe[ 'width' ] = 580; iframe[ 'height' ] = 434; document.body.appendChild(iframe); return ; |
搞定,跨你妹个蛋的域哇。
咩哈哈!!!
虽然问题看起来是解决了,
但是我告诉他最终解决方案不是这个,
因为你这么嵌入页面的话是非常危险的。
同时也不推荐大家去随便嵌入别人的网页到自己的应用中,
因为很危险哪。
正式的解决方案还是要靠去资源服务器添加跨域访问限制的配置。
最后是一张正常访问和不正常访问的请求响应的对比图:
很充实有趣有记录意义的一次bug解决体验。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步