130 lines
3.6 KiB
HTML
130 lines
3.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>无标题文档</title>
|
||
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||
|
|
<!-- Bootstrap -->
|
||
|
|
<link href="/css/bootstrap.css" rel="stylesheet">
|
||
|
|
<link href="/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
<link href="/vendor/switch/bootstrap-switch.css" rel="stylesheet">
|
||
|
|
<link href="/js/confirm/jquery-confirm.min.css" rel="stylesheet"/>
|
||
|
|
<link href="/vendor/slider/css/bootstrap-slider.min.css" rel="stylesheet" />
|
||
|
|
<link href="/vendor/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
|
||
|
|
<link href="/css/my.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" id="langcss">
|
||
|
|
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="js/html5shiv.js"></script>
|
||
|
|
<script src="js/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<script src="/js/jquery-1.11.3.min.js"></script>
|
||
|
|
<script src="/js/jquery.jsonrpcclient.js"></script>
|
||
|
|
<script src="/js/jquery.cookie.js"></script>
|
||
|
|
<script src="/js/bootstrap.js"></script>
|
||
|
|
<script src="/js/global.js" id="globaljs" defLang="cn"></script>
|
||
|
|
<script language="javascript" src="/js/flv.js" ></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div style="position:fixed;width:720px;height:576px;">
|
||
|
|
<video id="player" controls autoplay style="width:720px;height:576px; background: #555;"></video>
|
||
|
|
<div id="#rectP" style="position: absolute;z-index: 999;width:720px;height:576px; top: 0; left:0;">
|
||
|
|
<div id="rect" style="position: absolute; border: 4px solid #ff0000;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
if (flvjs.isSupported()) {
|
||
|
|
var player = flvjs.createPlayer({
|
||
|
|
type: 'flv',
|
||
|
|
hasAudio: false,
|
||
|
|
url: 'http://'+window.location.host+'/flv?app=live&stream=test'
|
||
|
|
});
|
||
|
|
player.attachMediaElement(document.getElementById("player"));
|
||
|
|
player.load(); //加载
|
||
|
|
setInterval( checkDelay, 5000 );
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function checkDelay() {
|
||
|
|
|
||
|
|
if ( player != null && player.buffered.length > 0 ) {
|
||
|
|
//console.log(player.currentTime,player.buffered.end(0));
|
||
|
|
if ( player.buffered.end( 0 ) - player.currentTime > 2 ) {
|
||
|
|
console.log( "seek" );
|
||
|
|
player.currentTime = player.buffered.end( 0 ) - 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var startX=-1, startY, totalW, totalH;
|
||
|
|
$("#rectP").mousedown(function(e){
|
||
|
|
console.log(e);
|
||
|
|
startX=e.offsetX;
|
||
|
|
startY=e.offsetY;
|
||
|
|
if($(e.target).attr("id")=="rect")
|
||
|
|
{
|
||
|
|
startX+=$("#rect").position().left;
|
||
|
|
startY+=$("#rect").position().top;
|
||
|
|
}
|
||
|
|
totalW=$("#rectP").innerWidth();
|
||
|
|
totalH=$("#rectP").innerHeight();
|
||
|
|
|
||
|
|
$("#rect").css("left",(100*startX/totalW)+"%");
|
||
|
|
$("#rect").css("top",(100*startY/totalH)+"%");
|
||
|
|
$("#rect").css("width","0%");
|
||
|
|
$("#rect").css("height","0%");
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#rectP").mousemove(function(e){
|
||
|
|
if(startX==-1)
|
||
|
|
return;
|
||
|
|
var x=e.offsetX;
|
||
|
|
var y=e.offsetY;
|
||
|
|
if($(e.target).attr("id")=="rect")
|
||
|
|
{
|
||
|
|
x+=$("#rect").position().left;
|
||
|
|
y+=$("#rect").position().top;
|
||
|
|
}
|
||
|
|
var w=x-startX;
|
||
|
|
if(w<0)
|
||
|
|
w=0;
|
||
|
|
var h=y-startY;
|
||
|
|
if(h<0)
|
||
|
|
h=0;
|
||
|
|
|
||
|
|
$("#rect").css("width",(100*w/totalW)+"%");
|
||
|
|
$("#rect").css("height",(100*h/totalH)+"%");
|
||
|
|
});
|
||
|
|
|
||
|
|
function drawDone(e)
|
||
|
|
{
|
||
|
|
if(startX==-1)
|
||
|
|
return;
|
||
|
|
var x=e.offsetX;
|
||
|
|
var y=e.offsetY;
|
||
|
|
var w=x-startX;
|
||
|
|
if(w<0)
|
||
|
|
w=0;
|
||
|
|
var h=y-startY;
|
||
|
|
if(h<0)
|
||
|
|
h=0;
|
||
|
|
curRoi.x=startX/totalW;
|
||
|
|
curRoi.y=startY/totalH;
|
||
|
|
curRoi.w=w/totalW;
|
||
|
|
curRoi.h=h/totalH;
|
||
|
|
startX=-1;
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#rectP").mouseup(drawDone);
|
||
|
|
$("#rectP").mouseleave(drawDone);
|
||
|
|
$("#rectP").on("dragstart",function(){return false;});
|
||
|
|
$("#rect").on("dragstart",function(){return false;});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|