事情是这样的,今天上午下班前,朋友发我一个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跨域问题的更多相关文章

  1. PHP解决h5页面跨域

    前端h5 页面请求后端接口会出现跨域, PHP 只需三行代码即可解决 //解决前端跨域(h5页面) header("Access-Control-Allow-Origin:*"); ...

  2. uni-app h5端跨域问题解决

    例如我现在的项目运行在 http://localhost:8080,而我有个接口是 https://service.picasso.adesk.com/v1/wallpaper/album,发起请求就 ...

  3. vue.js及H5常见跨域问题解决方案

    一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...

  4. h5请求跨域问题Access-Control-Allow-Origin解决跨域

    访问后端接口报错:No 'Access-Control-Allow-Origin' header is present on the requested resource 解决: Access-Con ...

  5. Spring @CrossOrigin 通配符 解决跨域问题

    @CrossOrigin 通配符 解决跨域问题 痛点: 对很多api接口需要 开放H5 Ajax跨域请求支持 由于环境多套域名不同,而CrossOrigin 原生只支持* 或者具体域名的跨域支持 所以 ...

  6. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  7. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  8. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  9. Thinkphp5.1允许uni-app的H5跨域请求接口解决方法

    情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...

随机推荐

  1. Java中String转换Double类型 Java小数点后留两位

    Java中String转换Double类型 double num1 = 0.0; String qq = "19.987"; num1 = Double.valueOf(qq.to ...

  2. Intersect交集

    Description 设计一个求集合交的算法:输入集合A与集合B,求集合A与B之交.集合中的元素为整数(可以用c语言中的int表示),且互不相同. Input 输入第一行为一个整数t(0<t& ...

  3. find the majority element

    Runtime: O(n) — Moore voting algorithm: We maintain a current candidate and a counter initialized to ...

  4. javascript操作json

    for (var i = 0; i < selectedPartList.length; i++) { if (selectedPartList[i].vpart_code == jsonRow ...

  5. 求最大公约数(GCD)的两种算法

    之前一直只知道欧几里得辗转相除法,今天学习了一下另外一种.在处理大数时更优秀的算法--Stein 特此记载 1.欧几里得(Euclid)算法 又称辗转相除法,依据定理gcd(a,b)=gcd(b,a% ...

  6. 在centos中部署jenkins

    在centos中部署jenkins,需要的环境:安装jdk,Apache-tomcat 这两步我前面文章里已写,再次忽略 到官网下载最新的jenkins 我这里的是  jenkins.war 把该文件 ...

  7. AJAX校验商品价格(类似校验用户名)

    服务器端程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <%@ WebHandler Language=" ...

  8. 1*Json对象声明简单,复合,对象数组

    //简单JSON对象 function btn1_click() { var json = { "id": 1001, "name": "张三&quo ...

  9. Ant 参考

    http://ant.apache.org/manual/Tasks/exec.html Exec Description Executes a system command. When the os ...

  10. php秒杀

    我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 ? 1 2 3 4 5 if(库存数量 > 0) {   //生成订单...   sql2:库存-1 ...