起因
由于众所周知的原因（指羊毛），Onedrive的服务器已经快炸了，因此微软不得不撤去了香港的CDN,但是我盘里还有将近2T的片没看呢。。。 微软美国的服务器在理想条件下也只有约200KB/s的速率，但是使用多线程可以达到最高5000KB/s，即可以满足40000kps视频的播放需求，基本上可以说是不影响体验了。 因此我找到了一个多线程实时播放的项目video-funnel，但是当时这个项目没有任何UI界面，而且每次打开新的流都要重启程序，很不方便。 在与作者交流之后，作者同意提供一个API，因此我也就动手写了一个前端：video_funnel_webui
代码
代码如下：
<html>
<head>
<title>Video Funnel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/mdui/0.4.2/css/mdui.min.css" integrity="sha256-ciZjlE3mLkmwd+Xel9t1pR7alsPIJj9yLb0lXcKjt+U=" crossorigin="anonymous" />
<script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.2/js/mdui.js" integrity="sha256-2kEEmZa8zf1k6TtViyoY3su5HJEnd926SXdqN02Crr4=" crossorigin="anonymous"></script>
<!--
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
-->
<script>
var $$ = mdui.JQ;
function play()
{
var url = $$("#url").val();if (url =="" ||url ==null) {mdui.snackbar({message:'未输入URL！'});return;}
var blocksize = $$("#blocksize").val();if (blocksize =="" ||blocksize ==null) {mdui.snackbar({message:'未输入Block Size！'});return;}
var piecesize = $$("#piecesize").val();if (piecesize =="" ||piecesize ==null) {mdui.snackbar({message:'未输入Piece Size！'});return;}
location.href = "api?url=" + encodeURIComponent(url) + "&block_size=" + blocksize + "&piece_size=" + piecesize;
};
</script>
</head>
<body class="mdui-theme-primary-indigo">
<div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme mdui-text-color-dark-text mdui-text-color-white-icon">
<i class="mdui-icon material-icons">av_timer</i>
<span class="mdui-typo-title">Video Funnel</span>
<div class="mdui-toolbar-spacer"></div>
<a href="https://github.com/cshuaimin/video-funnel" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
</svg>
</a>
</div>
</div>
<div class="mdui-container-fluid" style="margin-top:70px;min-width:320px;max-width:600px;">
<div class="mdui-center mdui-text-color-grey-800 mdui-text-center" style="float: left;width:100%;font-size: 35px;">
Video Funnel
</div>
<div class="mdui-center" style="width: 100%;float: left">
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">URL</label>
<input id="url" class="mdui-textfield-input" type="url" AUTOCOMPLETE="off"/>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Block Size</label>
<input id="blocksize" class="mdui-textfield-input" type="text" AUTOCOMPLETE="off" value="10M"/>
</div><div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Piece Size</label>
<input id="piecesize" class="mdui-textfield-input" type="text" AUTOCOMPLETE="off" value="2M"/>
</div>
<button id="submitButton" type="submit" onclick="play()" class=" mdui-ripple mdui-color-indigo-400 submitButton mdui-btn mdui-btn-raised mdui-center" style="margin-top:20px">
播放
</button>
</div>
</div>
</body>
</html>TO DO
1.添加复制按钮，但是我并没有找到一个兼容性好的方案。 2.网页内弹窗播放。 如果有路过的大佬知道怎么做，烦请指导。
发表回复