U2web Save
stream video with p2p
u2web
支持多源多线程下载的P2P视频分享
支持多线程下载
支持多源下载
CDN缓存友好,全部接口均可长缓存
下载引擎/播放引擎 https://github.com/suconghou/fastloadjs
P2P说明
P2P 分享使用的信令服务器 https://github.com/suconghou/signalserver
P2P 分享使用的网络库 https://github.com/suconghou/rtc
P2P分享当在线客户端播放的是同一资源(Chrome,Firefox播放的是webm,Safari播放的是mp4),同一清晰度时才会相互分享.
网站里的设置说明
这些设置一般无需更改,如播放卡顿,可修改视频解析服务
内容API服务
资源提供接口,调用有次数限制,一般使用默认值无需修改
可用的后端项目
https://github.com/suconghou/videoproxy
https://github.com/suconghou/u2proxyapi
视频解析服务
可用的后端项目
https://github.com/suconghou/videoproxy
使用cf workers 中转的 https://github.com/suconghou/u2worker
使用netlify functions 中转的 https://github.com/suconghou/netlifyworker
如果要使用多源负载均衡,可以使用多个地址,用;号隔开
例如
/video;https://stream.pull.workers.dev/video
代表当前域名的和部署在cf workers的两个地址负载均衡
注意第一个地址始终占有更高的权重,地址不可用后将会重试到其他地址.
信令服务器
一般无需修改
可用的后端项目
https://github.com/suconghou/signalserver
同一信令服务器下的用户才会相互分享
编译发布
注意修改 public/index.html public/play.html 中js库的版本号
然后执行 make release
组件模式
编译为组件模式
- 修改
service/index.js中abs变量为https绝对地址 - 执行
yarn buildwc
参数
v: {
type: String,
required: true
},
level : {
type:Number,
default:0,
},
autoplay: {
type: Boolean,
default: true
},
audio: {
type: Boolean,
default: false
},
playlist: {
type: [String, Array],
default: ""
}
nop2p: {
type: Boolean,
default: false,
},
screenshot: {
type: Boolean,
default: true,
},
作为web component组件,所有参数默认均为零值,需自己按需设置值
level 可配置 1 2 3 对应不同权限的清晰度
playlist仅在audio模式下可用,
可取值为一个播放列表ID,或者一个数组形式为
[
{
v:'视频ID',
title:'名称'
}
]
audio模式需开启autoplay
screenshot截图默认开启,播放器聚焦时快捷键s可直接触发
safari不支持对mse的视频截图,已对其屏蔽,见https://github.com/video-dev/hls.js/issues/1806
因需要MSE的支持,移动端手机IOS系统(IOS13,14等)均不支持,iPadOS 13+支持
https://stackoverflow.com/questions/52999825/why-exactly-doesnt-html5-media-source-video-work-on-ios
安卓微信支持,UC浏览器支持,手机QQ浏览器不支持.
embed video
click 嵌入视频 below the video player , It shows you how to embed iframe or component
when use web component, it needs some dependencies vue axios fastloadjs u2-player
a simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* only for css reset */
html{width:100%;height:100%;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body{margin:0;width:100%;height:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
input,button,select,textarea{outline:none}textarea{resize:none}a{text-decoration:none;color:#000}ul{padding-left:0;list-style:none;}
/* css reset end */
.wrapper {
width: 70%;
margin: 10px auto;
background: #faa;
}
.player-box {
height: 0;
padding-bottom: 59%;
/* 最小56.25%, 稍微加大可留一些间距,看灰色底 */
background: #aaa; /* this is only for debug view */
}
.unsupport {
text-align: center;
padding-top: 100px;
font-size: 16px;
color: #f11;
}
</style>
</head>
<body>
<script>
// please set localStorage to use your own worker or videoproxy
// localStorage.setItem("baseurl","https://your_worker_or_videoproxy_domain/video");
</script>
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/vue.min.js,npm/[email protected]/dist/axios.min.js,gh/suconghou/assets@8a64290/fastload.min.js,gh/suconghou/assets@8a64290/u2-player.min.js"></script>
<div class="wrapper">
<div class="player-box">
<u2-player autoplay="true" nop2p="true" screenshot="true" v="9-4aWqk7b0k" id="video"></u2-player>
</div>
</div>
<script>
// optional , give message if browser too low
var modern = window.Promise &&
window.ReadableStream &&
window.fetch &&
window.ArrayBuffer &&
window.MediaSource;
if (!modern) {
var el = document.getElementsByClassName('player-box')
if (el && el.length) {
el[0].innerHTML = '<div class="unsupport">此浏览器不支持,请更换浏览器</div>'
}
}
</script>
</body>
</html>
notice
you should change service/index.js and yarn buildwc to use your own worker or videoproxy backend
or set localStorage on your website
build from source
update public/index.html, modify the script fastload.min.js to the latest version if you need.
default config is in src/service/index.js but can be override by localStorage,
update it as you need.
yarn install and yarn build to build website, yarn buildwc to build web component
本项目仅作为学习使用,切勿用作其他用途
更多说明可参考
Open Source Agenda Badge
