各大视频网站的VIP解析

这个页面有附属脚本，酌情访问

这里是Minloha的小站，今天在这里开一个小功能：VIP解析。

先说下这东西是怎么回事。各大视频网站播放会员视频的时候，播放器最终拿到的是一个视频流地址，很多网站用的是切成一段一段的m3u8。这个地址在服务器那边是做过校验的，会看referer之类的请求头，所以直接把它复制出来，换个浏览器打开十有八九是黑屏。所谓“解析”，就是在自己的服务器上带着正确的请求头去访问原视频页面，把真正的播放地址扒出来，再返回给前端播放。前端这个页面要干的就三件事：收链接、看看像不像链接、扔给解析接口。

代码在下面，没多少技术，接口地址我写成了示例域名，用的时候换成自己找的接口就行。

GO!

正式介绍

首先我们需要一个html

页面骨架很简单，一个输入框加一个按钮。输入框负责收视频网站的链接，按钮负责触发跳转。id="ipt"是给js读输入用的，class是留给css化妆用的，onclick="on()"就是把点击事件绑到下面那个函数上。基本随随便便写写就行：

<!-- 可以插入一些css或js，这里直接放出来了 -->
<input type="text" placeholder="在此处输入链接" class="ipt" id="ipt"/>
<button onclick="on()" class="btn">点我前往</button>

然后就是一个API，其实这个就是造壳子而已，加入一小段js：

<script>
function on(){
    var id=document.getElementById('ipt').value;
    var url ="https://api.example.com/video.php?url="+id;
    var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+.*$/;
    if(!reg.test(id)){

}else{
window.location.replace("https://api.example.com/video.php?url="+id);
}
}
</script>

这段js一共干三件事：把输入框里的内容读出来、判断它是不是一个http/https开头的链接、合法就跳转到解析接口。document.getElementById('ipt')找到输入框，.value拿到里面填的文字，这两步合起来就是那一行。window.location.replace和平时常用的location.href有点区别：replace是“替换”当前页面，历史记录里不会留这一页，用户点返回键不会又弹回来，跳转体验干净一点。不合法的时候现在是直接什么都不做，按钮点了跟没点一样，可以自己加个提示。

顺带说一句，代码里那个var url拼出来之后就搁置了，留着不影响功能。

因为需要对输入的内容进行判断，这里采用了正则表达式进行匹配，正则表达式的用法非常多，这里只做简单的用法介绍：

var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+.*$/;
/*
这句就是对输入的内容进行匹配，关键在于是[hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]

用地球的语言来说就是，输入的内容满足 https://XXXX.XXX 或 http://XXXX.XXX 的格式

对于网站来说，一般还有接下来的路径，所以满足域名的条件只需在后面进行贪婪匹配就完事了

*/

把这条正则拆开看，其实就是几段拼起来的：

• ^表示从字符串开头开始匹配；
• [hH][tT]{2}[pP]就是http这四个字母，方括号里同时写大小写表示这一位都认，{2}指的是前面那个t要出现两次，所以http和HTTP都能匹配，后面跟着:\/\/；
• 竖线|是“或”，前一半管http，后一半[hH][tT]{2}[pP][sS]管https。正则匹配的时候从左往右试，http那半截匹配到https的s就接不上了，自然滑到后一半；
• (([A-Za-z0-9-~]+)\.)+是域名部分，要求至少有一个点号，字母、数字、减号、波浪线都放行；
• ([A-Za-z0-9-~\/])+要求域名后至少再跟一个合法字符，域名的尾巴和路径的开头都靠它兜着；
• 最后的.*$是贪婪匹配，把剩下的路径、问号、参数一股脑全吃掉。

当然这条正则不算严谨，端口号的冒号、域名里的下划线都照顾不到，不过路径和查询串里的特殊符号会被最后的.*兜住，它的任务本来也不是做严格的URL校验，而是挡住明显不是链接的输入，别让乱七八糟的东西拼进接口地址。真要图省事也可以只判断开头是不是http，具体看自己对输入源的信任程度。

这里放一个随手改过的小版本，补上了空输入的提醒，还给链接套了一层encodeURIComponent。链接里如果带&或者中文，不转义直接拼接会把接口的参数截断，这个坑很常见：

function on(){
    var id = document.getElementById('ipt').value.trim();
    var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+.*$/;
    if(!reg.test(id)){
        alert("这好像不是一个视频链接吧");
        return;
    }
    window.location.replace("https://api.example.com/video.php?url=" + encodeURIComponent(id));
}

顺便聊几个这类页面的常见坑：

• 解析接口基本都是第三方搭的，说不准哪天就失效或者关站，页面写得再好也架不住对面跑路，所以接口地址最好单独拎出来，换的时候只改一处；
• 有些接口返回的播放页会带弹窗和缓存，免费的接口大多带点广告，介意的话就自己搭后端；
• 前端直接请求接口容易撞上跨域，我们这个页面用跳转的方式就绕开了，代价是播放页不在自己站里；
• 手机上的话，输入框占80%、按钮占10%的宽度是给电脑屏写的，小屏上按钮会挤成一小条，真要兼容手机还是老老实实上flex。

最后再写亿点人人都会的css，就完成了：

<style>
.ipt{
    border: 1px solid #ccc; 
                padding: 7px 0px;
                border-radius: 3px;
	border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
	border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
                padding-left:5px;
}
</style>

这段样式看着眼熟吧，输入框那一坨是典型的 bootstrap 聚焦样式写法，蓝色边框加一圈外发光。毛病也有：抠的时候连:focus选择器一起丢了，所以它不管聚不聚焦，一直顶着发光效果；transition那行末尾少了个分号，浏览器会把后面的border-color也当成它的一部分，两行一起被丢掉，所以那个过渡动画其实根本没生效。前面几行border、padding、border-radius还重复写了两遍，后面的覆盖前面的，不影响结果。好在页面就一个输入框一个按钮，这点毛病没人看得出来。颜色、宽度这些改起来很随意，#1E90FF是很标准的天蓝色，想换风格搜个配色改改就行。

总结

这一篇就是把输入框、正则和跳转拼成一个小页面的过程，真正干活的就一个匹配、一个跳转，剩下的都是门面功夫。解析接口毕竟是第三方服务，稳定性随缘，感兴趣的可以自己搭个后端玩玩，原理没那么玄乎。有问题评论区聊。