<!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="js/ajax.js"></script>
|
<script src="js/renderer.js"></script>
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.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/test.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;
|
/* $.get("http://127.0.0.1:8088/monica/test/video", function (data) {
|
h5lc.play(data)
|
}
|
);*/
|
play();
|
$playDom.style.display = 'none';
|
$stopDom.style.display = 'block';
|
}, false);
|
|
$stop.addEventListener('click', function () {
|
if (!isPlaying) {
|
return;
|
}
|
|
isPlaying = false;
|
$.get("http://127.0.0.1:8088/monica/video/stop?param=live/test", function () {
|
alert("视频流已关闭");
|
h5lc.close()
|
}
|
);
|
//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://172.16.30.113:8082/live/video6.flv")
|
//h5lc.play("ws://localhost:8072/live/test.flv")
|
// h5lc.play("ws://119.9.118.39:8080/live/user1", canvas)
|
// h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas)
|
// h5lc.play("ws://localhost:8080/live/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>
|
