人生第一次写前端 —— video-funnel-webui

learningman 7月 04, 2019

起因

由于众所周知的原因(指羊毛),Onedrive的服务器已经快炸了,因此微软不得不撤去了香港的CDN,但是我盘里还有将近2T的片没看呢。。。
微软美国的服务器在理想条件下也只有约200KB/s的速率,但是使用多线程可以达到最高5000KB/s,即可以满足40000kps视频的播放需求,基本上可以说是不影响体验了。
因此我找到了一个多线程实时播放的项目video-funnel,但是当时这个项目没有任何UI界面,而且每次打开新的流都要重启程序,很不方便。
在与作者交流之后,作者同意提供一个API,因此我也就动手写了一个前端:video_funnel_webui

代码

代码如下:

<!DOCTYPE html>
<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.网页内弹窗播放。
如果有路过的大佬知道怎么做,烦请指导。

本文采用 CC BY-NC-SA 4.0 协议进行许可,在您遵循此协议的情况下,可以自由共享与演绎本文章。
本文链接:https://learningman.top/archives/97

  1. 说道:

    牛逼,话说你怎么还给网站备案了...

    1. learningman说道:

      不备案我怎么用我上海的服务器。。。备案两年多了

发表评论

电子邮件地址不会被公开。 必填项已用*标注