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解决体验。