<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<title>Jessibuca 1.0</title>
|
<meta charset="utf-8"/>
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
<link rel="stylesheet" href="css/controles.css">
|
<link rel="stylesheet" href="css/progressTime.css">
|
|
|
<style>
|
.player-wrapper {
|
width: 900px;
|
height: 500px;
|
/*overflow-y: auto;*/
|
margin: 0 auto;
|
text-align: center;
|
}
|
/* .player-wrapper canvas {
|
width: 100%;
|
height: 100%;
|
}*/
|
|
</style>
|
</head>
|
|
<body>
|
|
<!-- jessiebuca播放器 -->
|
<div class="wrap">
|
<div class="content">
|
<div class="player" onmouseover="playerShow()"onmouseout="playerHidden()">
|
<div class="player-wrapper" id="container" style="background-color: #0D0E1B;">
|
</div>
|
<div class="control">
|
|
<div class="fa fa-play" id="play">
|
</div>
|
<div class="fa fa-stop" id="stop" style="display: none">
|
</div>
|
|
<div>
|
<span class="progress"></span>
|
</div>
|
<div class="timer">
|
<span class="progress_timer">00:00:00</span>/
|
<span class="duration_timer">00:00:00</span>
|
</div>
|
<div class="fa fa-expand expand" onclick="h5lc.fullscreen=true"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="progressTime"></div>
|
|
|
<script src="./js/ajax.js"></script>
|
<script src="./js/renderer.js"></script>
|
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
<script type="text/javascript" src="./js/jquery.progressTime.js"></script>
|
|
|
<script>
|
var hourTimestamp = 3600 * 1000;
|
var dayTimestamp = hourTimestamp * 24;
|
var currentTimer;
|
|
|
window.onkeydown = function () {
|
h5lc.fullscreen = false
|
}
|
var $play = document.getElementById('play');
|
var $stop = document.getElementById('stop');
|
var container = document.getElementById("container");
|
var $progressTime = document.getElementById('progressTime');
|
|
var isPlaying = false;
|
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;
|
$play.style.display = 'none';
|
$stop.style.display = 'inline';
|
}
|
$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();
|
$play.style.display = 'none';
|
$stop.style.display = 'inline';
|
}, false);
|
|
$stop.addEventListener('click', function () {
|
if (!isPlaying) {
|
return;
|
}
|
isPlaying = false;
|
//stop();
|
|
$play.style.display = 'inline';
|
$stop.style.display = 'none';
|
}, false);
|
|
|
function play(firstResponseIp) {
|
h5lc.play("ws://172.16.30.113:8082/live/video3.flv")
|
}
|
|
function stop() {
|
$.get("http://127.0.0.1:8088/monica/video/stop?param=live/test", function () {
|
alert("视频流已关闭");
|
h5lc.close()
|
}
|
);
|
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 playerShow(){
|
if (isLive) {
|
$(".player .control").css("display","block")
|
}else {
|
$(".player .control").css("display","none")
|
}
|
}
|
|
function playerHidden(){
|
$(".player .control").css("display","none")
|
}
|
|
|
$("#progressTime").ProgressTime({
|
container: "progressTime",
|
startTime: new Date(formatDate(new Date(new Date().getTime() - dayTimestamp * 3), "YYYY/MM/DD 00:00:00")),
|
endTime: new Date(formatDate(new Date(), "YYYY/MM/DD 00:00:00")),
|
currentTime: new Date(formatDate(new Date(new Date().getTime() - dayTimestamp * 2), "YYYY/MM/DD 12:00:00")),
|
interval: 300,
|
delay: 2000,
|
isNow: false, // 是否显示右侧回到当前时间
|
toPlay: false, // 渲染是否完成
|
animateFinish: false, // 动画是否完成
|
callback: function (config) {
|
console.log(config);
|
currentTimer=config.time;
|
},
|
animateCallback: function (config) {
|
|
// 假如动画完成之后请求数据需要两秒
|
var timer = setTimeout(function () {
|
progressTime.options.toPlay = true; // 两秒之后再继续走播放条
|
clearTimeout(timer);
|
}, 0);
|
}
|
});
|
$(".progressTime-left-b-start").on("click", function () {
|
if(currentTimer){
|
$(this).addClass("stop");
|
|
$.ajax({
|
url: ""+"?param=",
|
async: false,//同步方式发送请求，true为异步发送
|
type: "GET",
|
data: {},
|
success: function (result) {
|
alert(result);
|
}
|
});
|
|
}
|
});
|
$(".progressTime-left-b-start stop").on("click", function () {
|
$(this).removeClass("stop");
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
