Created
August 28, 2017 16:40
-
-
Save hitripod/5acda92b2bb2e080fc45b9258c0b21de to your computer and use it in GitHub Desktop.
PearPlayer Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Pear Player</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<div id="main"> | |
<!--<video id="pearvideo" src="https://qq.webrtc.win/tv/pear001.mp4" controls>--> | |
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/planet.mp4" controls>--> | |
<video id="pearvideo" src="https://qq.webrtc.win/fastweb/Pear-Demo-FastWeb.mp4" controls> | |
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/SoundOfMusic_20.mp4" controls>--> | |
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/Pear-Demo-SoundOfMusic_60.mp4" controls>--> | |
</video> | |
</div> | |
<!--<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest/dist/pear-player.min.js"></script>--> | |
<script src="../pear-player.js"></script> | |
<!--<script src="../dist/pear-player.min.js"></script>--> | |
<script> | |
var magnetURI = 'magnet:?xt=urn:btih:1e02d0db405a5a17d59a2e1d42e9908f074a1e44&dn=pear001.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com'; | |
// var magnetURI = 'magnet:?xt=urn:btih:18aef04e719dbc741578824938715e42397b194b&dn=planet.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com'; | |
var xhr = new XMLHttpRequest(); | |
xhr.open("POST", 'https://api.webrtc.win:6601/v1/customer/login'); | |
var data = JSON.stringify({ | |
user:'demo', | |
password:'demo' | |
}); | |
xhr.timeout = 2000; | |
xhr.onload = function () { | |
if (this.status >= 200 && this.status < 300) { | |
var res = JSON.parse(this.response); | |
if (!!res.token){ | |
console.log('token:' +res.token); | |
//第一个参数为video标签的id或class | |
var player = new PearPlayer('#pearvideo', res.token, { | |
type: 'mp4', | |
algorithm: 'firstaid', //核心算法,默认firstaid | |
autoplay: true, //是否自动播发视频,默认true | |
interval: 5000, //滑动窗口的时间间隔,单位毫秒,默认10s | |
auto: false, //true为连续下载buffer,false则是只有当前播放时间与已缓冲时间小于slideInterval时下载buffer,默认false | |
slideInterval: 20, //当前播放时间与已缓冲时间小于这个数值时触发窗口滑动,单位秒,默认20s | |
useDataChannel: true, //是否开启data channel,默认true | |
dataChannels: 10, //创建data channel的最大数量,默认2 | |
useTorrent: true, //是否开启Browser P2P(基于Webtorrent),默认true | |
// magnetURI: magnetURI, //可手动传入magnetURI,需先将useTorrent设为true | |
// trackers:["wss://tracker.openwebtorrent.com"], //可手动传入tracker服务器,需先将useTorrent设为true | |
useMonitor: true //是否开启monitor,会稍微影响性能,默认false | |
}); | |
player.on('exception', onException); //播放器出现异常时的回调函数 | |
player.on('begin', onBegin); //开始下载时触发 | |
player.on('progress', onProgress); //回调目前的下载进度 | |
player.on('cloudspeed', onCloudSpeed); //来自server的HTTP的平均下载速度 | |
player.on('fogspeed', onFogSpeed); //来自fog的节点(包括HTTP和WebRTC)的平均下载速度 | |
player.on('fograte', onWebRTCRate); //fog节点的下载比率(下载的字节数除以总的字节数) | |
player.on('buffersources', onBufferSources); //buffer map,记录每个buffer的下载源类型,其中s: server n: node d: data channel b: browser | |
player.on('done', onDone); //结束下载时触发 | |
player.on('traffic', onTraffic); //节点流量统计 | |
} | |
} else { | |
alert('请求出错!'); | |
} | |
}; | |
xhr.send(data); | |
function onBegin(fileLength, chunks) { | |
console.log('start downloading buffer by first aid, file length is:' + fileLength + ' total chunks:' + chunks); | |
} | |
function onProgress(downloaded) { | |
console.log('Progress: ' + (downloaded * 100).toFixed(1) + '%'); | |
} | |
function onCloudSpeed(speed) { | |
console.log('Cloud download speed: ' + speed + 'KBps'); | |
} | |
function onFogSpeed(speed) { | |
console.log('Fog download speed: ' + speed + 'KBps'); | |
} | |
function onWebRTCRate(p2pRate) { | |
console.log('Fog Rate: ' + (p2pRate * 100).toFixed(1) + '%'); | |
} | |
function onDone() { | |
console.log('finished downloading buffer by first aid'); | |
} | |
function onException(exception) { | |
var errCode = exception.errCode; | |
switch (errCode) { | |
case 1: | |
console.log(exception.errMsg); | |
break | |
} | |
} | |
function onBufferSources(bufferSources) { //s: server n: node d: data channel b: browser | |
console.log('Current Buffer Sources:' + bufferSources); | |
} | |
function onTraffic(mac, downloaded, type) { | |
console.log('type:'+type+' mac:'+mac+' downloaded:'+downloaded/1024/1024+'MB'); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment