Httpsify – 国内视频https托管嵌入

2024年5月10日 355次阅读 来源: fxp

问题

一些浏览器会禁止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。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
<script>
  function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      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);
  }
</script>
</body>
</html>

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

    原文作者：fxp
    原文地址: https://segmentfault.com/a/1190000002413692
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞