← xiaopingfeng.com/notes/ 随笔

Httpsify - 国内视频https托管方法

NB · 0041 · 2014-12-08 · hackathon

问题

一些浏览器会禁止http内容展现在https页面中。比如我们在squarespace里插入一个Youku的视频(Youku嵌入的视频不支持https),就会无法播放

解决方案

我们需要找一个免费的支持https的serve视频的地方。第一个选择就是七牛云,搞了半天发现qiniu的ssl证书是invalid的... 于是又想起了“可怜的”LeanCloud。下载云代码,把要托管的文件放到public下,avoscloud deploy avoscloud publish就好啦,在setting里设置一下web主机的二级域名。就能直接访问了。

squarespace

squarespace比较特别的是它要求embed video,比如youtube之类的用iframe的玩意儿。但国内的那些视频网站基本都不支持https的iframe。好吧,这个也用LeanCloud解决吧。那就写个HTML来解决它。这个HTML要能处理各种Video的请求的话就得读到url里的query。

<div id="content"></div>

function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&amp;]" + name + "=([^&amp;#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } var videoUrl = getParameterByName('video'); if (typeof videoUrl != 'undefined') { var node = document.createElement("video"); node.width = window.innerWidth; node.height = window.innerHeight; node.autoplay = true var controlAttr = document.createAttribute('controls'); var srcAttr = document.createAttribute('src'); srcAttr.value = videoUrl; node.setAttributeNode(srcAttr); node.setAttributeNode(controlAttr); document.getElementById('content').appendChild(node); }

没做任何优化,只处理了video这种query,大概意思就是这样。