You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
7.1 KiB
239 lines
7.1 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Jessibuca 1.0</title>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
.btn {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
margin: 0;
|
|
transition: .1s;
|
|
font-weight: 500;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
background-color: #409eff;
|
|
border-color: #409eff;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-danger {
|
|
color: #fff;
|
|
background-color: #f56c6c;
|
|
border-color: #f56c6c;
|
|
}
|
|
|
|
.btn-success {
|
|
color: #fff;
|
|
background-color: #67c23a;
|
|
border-color: #67c23a;
|
|
}
|
|
|
|
.player-wrapper {
|
|
width: 900px;
|
|
height: 500px;
|
|
/*overflow-y: auto;*/
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-wrapper {
|
|
width: 900px;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/*.player-wrapper canvas {*/
|
|
/* width: 100%;*/
|
|
/* height: 100%;*/
|
|
/*}*/
|
|
|
|
.logs {
|
|
border: 1px solid #333;
|
|
width: 900px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
overflow-y: auto;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px">
|
|
</div>
|
|
<div class="btn-wrapper" id="playDom">
|
|
<button class="btn" id="play">播放</button>
|
|
</div>
|
|
<div class="btn-wrapper btn-wrapper2" id="stopDom" style="display: none">
|
|
<div style="margin-top: 5px">
|
|
<button class="btn btn-danger" id="stop">结束</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn" onclick="h5lc.fullscreen=true">全屏</button>
|
|
<div id="logout" class="logs">
|
|
</div>
|
|
|
|
<script src="./ajax.js"></script>
|
|
<script src="./renderer.js"></script>
|
|
<script>
|
|
onerror = handleErr;
|
|
var txt = "";
|
|
window.onkeydown = function () {
|
|
h5lc.fullscreen = false
|
|
}
|
|
var $play = document.getElementById('play');
|
|
var $stop = document.getElementById('stop');
|
|
var $playDom = document.getElementById('playDom');
|
|
var $stopDom = document.getElementById('stopDom');
|
|
var container = document.getElementById("container");
|
|
var isPlaying = false;
|
|
disabledMouseWheel(container);
|
|
let stream = queryParam('stream') || 'user1';
|
|
let decoder = queryParam('decoder') || 'ff';
|
|
let source = queryParam('source') || 'localhost';
|
|
var h5lc = new Jessibuca({ container, decoder: decoder + ".js", videoBuffer: 0 });
|
|
|
|
h5lc.onLoad = function () {
|
|
//this.play("wss://pulls.1234326.cn/live/L01.flv")
|
|
//this.play("ws://localhost:8080/live/rtc.flv")
|
|
//this.play("ws://" + source + ":8080/live/" + stream)
|
|
//this.play("ws://pull3.afb1188.com/live/" + stream + ".flv")
|
|
//this.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
|
|
}
|
|
h5lc.onPlay = function () {
|
|
isPlaying = true;
|
|
$playDom.style.display = 'none';
|
|
$stopDom.style.display = 'block';
|
|
}
|
|
$play.addEventListener('click', function () {
|
|
if (isPlaying) {
|
|
return;
|
|
}
|
|
isPlaying = true;
|
|
play();
|
|
$playDom.style.display = 'none';
|
|
$stopDom.style.display = 'block';
|
|
}, false);
|
|
|
|
$stop.addEventListener('click', function () {
|
|
if (!isPlaying) {
|
|
return;
|
|
}
|
|
|
|
isPlaying = false;
|
|
stop();
|
|
|
|
$playDom.style.display = 'block';
|
|
$stopDom.style.display = 'none';
|
|
}, false);
|
|
|
|
|
|
function play(firstResponseIp) {
|
|
//h5lc.play("ws://" + (firstResponseIp || source) + ":8080/live/" + stream)
|
|
//h5lc.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
|
|
h5lc.play("ws://localhost:8080/live/" + stream)
|
|
// h5lc.play("ws://119.9.118.39:8080/live/user1", canvas)
|
|
// h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas)
|
|
}
|
|
function getFastCdnFromList(ipList) {
|
|
ipList = ipList || [];
|
|
var firstResponseIp = '';
|
|
|
|
for (var i = 0, len = ipList.length; i < len; i++) {
|
|
var tempIp = ipList[i].name;
|
|
var reqHref = 'http://' + tempIp + '/test';
|
|
var request = _ajax.get(reqHref);
|
|
request.then(function (data) {
|
|
if (!firstResponseIp) {
|
|
firstResponseIp = tempIp;
|
|
// 直接可以播放了。
|
|
play(firstResponseIp);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
function stop() {
|
|
h5lc.close()
|
|
}
|
|
|
|
function queryParam(name, url) {
|
|
var search = window.location.search;
|
|
var qArr = '';
|
|
var key = {};
|
|
|
|
if (url) {
|
|
qArr = url.split("?")[1].split("&")
|
|
|
|
} else {
|
|
if (!window.location.search) {
|
|
return
|
|
}
|
|
qArr = search.substr(1).split("&")
|
|
}
|
|
|
|
for (var i = 0; i < qArr.length; i++) {
|
|
|
|
var firstPos = qArr[i].indexOf('=');
|
|
key[qArr[i].slice(0, firstPos)] = qArr[i].slice(firstPos + 1)
|
|
}
|
|
|
|
if (name) {
|
|
return key[name]
|
|
} else {
|
|
if (url) {
|
|
return key[name]
|
|
} else {
|
|
return key
|
|
}
|
|
}
|
|
}
|
|
|
|
function disabledMouseWheel(ele) {
|
|
if (ele.addEventListener) {
|
|
ele.addEventListener('DOMMouseScroll', scrollFunc, false);
|
|
} //W3C
|
|
ele.onmousewheel = scrollFunc; //IE/Opera/Chrome
|
|
}
|
|
|
|
function scrollFunc(evt) {
|
|
evt = evt || window.event;
|
|
if (evt.preventDefault) {
|
|
// Firefox
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
} else {
|
|
// IE
|
|
evt.cancelBubble = true;
|
|
evt.returnValue = false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function handleErr(msg, url, l) {
|
|
txt = "There was an error on this page.\n\n";
|
|
txt += "Error: " + msg + "\n";
|
|
txt += "URL: " + url + "\n";
|
|
txt += "Line: " + l + "\n\n";
|
|
document.getElementById("logout").innerHTML += txt + "<br>";
|
|
return true;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|