Skip to content

Commit

Permalink
use flow player
Browse files Browse the repository at this point in the history
  • Loading branch information
@penggy
penggy committed Apr 18, 2017
1 parent 1b7994c commit 8578f88
Show file tree
Hide file tree
Showing 16 changed files with 12,244 additions and 2 deletions.
208 changes: 208 additions & 0 deletions H5/dist/flowplay.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>
<head>
<title>EasyClient</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="./adminlte-2.3.6/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./adminlte-2.3.6/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./adminlte-2.3.6/ionicons-2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="./adminlte-2.3.6/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="./adminlte-2.3.6/dist/css/skins/skin-green.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="./adminlte-2.3.6/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="./adminlte-2.3.6/bootstrap/js/bootstrap.min.js"></script>
<script src="./adminlte-2.3.6/plugins/jQueryMobile/jquery.mobile.custom.min.js"></script>
<script src="./adminlte-2.3.6/dist/js/app.js"></script>
<script src="./adminlte-2.3.6/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<link rel="stylesheet" href="./adminlte-2.3.6/plugins/iCheck/all.css">
<script src="./adminlte-2.3.6/plugins/iCheck/icheck.min.js"></script>
<script src="./adminlte-2.3.6/plugins/md5/jquery.md5.js"></script>
<script src="./adminlte-2.3.6/plugins/input-number/jquery.inputnumber.js"></script>
<link rel="stylesheet" href="./adminlte-2.3.6/plugins/gritter/jquery.gritter.css">
<script src="./adminlte-2.3.6/plugins/gritter/jquery.gritter.js"></script>
<link rel="stylesheet" href="./adminlte-2.3.6/plugins/loadmask/jquery.loadmask.css">
<script src="./adminlte-2.3.6/plugins/loadmask/jquery.loadmask.js"></script>
<script src="./adminlte-2.3.6/plugins/ellipsis/jquery.ellipsis.js"></script>
<script src="./adminlte-2.3.6/plugins/validator/validator.min.js"></script>
<script src="./adminlte-2.3.6/plugins/bootbox/bootbox.min.js"></script>
<script src="./adminlte-2.3.6/plugins/cookie/jquery.cookie.min.js"></script>

<link rel="stylesheet" href="./css/common.css">
<script src="./js/common.js"></script>
<link rel="stylesheet" href="./flowplayer-7.0.2/skin/skin.css">
<script src="./flowplayer-7.0.2/flowplayer.min.js"></script>
<link href="./video-js/video-js.min.css" rel="stylesheet">
<script src="./video-js/video.min.js"></script>
<style>
.channel-title {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
padding: 0 15px;
font-size: 20px;
line-height: 50px;
font-weight: 700;
}

#dvplay {
margin: 0 auto;
width: 75%;
height: auto;
display: block;
}

.video-progress {
position: absolute;
left:0;right:0;top:0;bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 99999;
}
.video-progress .progress {
border-radius: 5px;
position: absolute;
top: 45%;left:20%;right:20%;
}
.video-progress .progress .progress-bar{
text-align: right;
padding-right: 4px;
}
</style>
</head>

<body class="hold-transition skin-green layout-top-nav">
<div class="wrapper">
<header class="main-header">
<nav class="navbar navbar-static-top" role="navigation">
<div class="channel-title"></div>
<div class="navbar-custom-menu pull-left">
<ul class="nav navbar-nav">
<li>
<a href="./index.html"><i class="fa fa-chevron-left"></i> 返回</a>
</li>
</ul>
</div>
</nav>
</header>

<div class="content-wrapper">
<section class="content">
<div id="dvplay" style="background-color:#999;"></div>
<br>
</section>
</div>
<!-- content-wrapper -->
<div class="container-fluid" style="background-color:#2a2a2a;color:#979797;padding:20px 10px;">
<div class="row">
<div class="hidden-xs col-sm-3">
<table style="width:100%;height: 120px;">
<tr>
<td style="vertical-align: middle;text-align: right;"><a href="./download_easy_client.html"><i class="fa fa-download"></i> EasyClient App下载</a></td>
</tr>
</table>
</div>
<div class="col-xs-12 col-sm-9 col-md-7">
<div style="overflow: hidden;position: relative;min-height: 120px;">
<div style="width:120px;position: absolute;left:0;top:0;bottom: 0;">
<table style="width:100%;height: 100%;">
<tr>
<td style="vertical-align: middle;text-align: center;"><img src="./images/qr_easy_client.png" alt="EasyClient" style="width:120px;height:120px;"></td>
</tr>
</table>
</div>
<p style="margin:0;margin-left: 140px;">
EasyDarwin流媒体云平台是一套开源流媒体平台框架，能够直接接入各种类型摄像机、移动手持/单兵设备，还能将各种现场已经部署的摄像机通过EasyNVR的内网服务接入到云平台，实现设备的统一接入、管理与控制。支持PC、WEB、Android、iOS、H5全平台客户端接入！
</p>
</div>
</div>
</div>
</div>
<footer class="main-footer">
<div class="pull-right">
EasyClient H5版:v1.1
</div>
EasyDarwin云平台:v1.1
</footer>
</div>
<!-- wrapper-->
<script>
if(!$.cookie("videoUrl")){
top.location.href = "./index.html";
}
function showProgress(cb){
var $vp = $(".video-progress").toggleClass("hide");
var $p = $(".video-progress .progress");
var $pb = $(".video-progress .progress .progress-bar");
var timeout = 5000;
var step = 125;
var cnt = 0;
var timer = setInterval(function(){
cnt += step;
var percent = Math.round(cnt/timeout * 100);
$pb.css("width",percent + "%").attr("aria-valuenow",percent).text(percent + "%");
if(cnt >= timeout){
clearInterval(timer);
setTimeout(function(){
$vp.toggleClass("hide");
$pb.css("width","0%").attr("aria-valuenow","0").text("0%");
if(cb) cb();
},500);
}
},step);
}
var player = null;
if(isPC()){
$("#dvplay").flowplayer({
autoplay : true,
poster : $.cookie("videoImg") || "./images/snap.png",
share : false,
swf : './flowplayer-7.0.2/flowplayer.swf',
swfHls : false,
rtmpt: false,
clip : {
sources : [
{type : 'video/flash', src : $.cookie("videoUrl")}
]
}
});
}else{
$("#dvplay").hide();
$.ajax("./video-template.html").then(function(data){
var $v = $(data);
$v.find("video").attr("poster",$.cookie("videoImg")||"./images/snap.png").attr("id","easy-player");
$(".content-wrapper .content").append($v);
var isReady = $.cookie("isReady");
$.removeCookie("isReady");
if(isReady === "0"){
showProgress(function(){
$v.find("video source").attr("src",$.cookie("videoUrl")||"");
videojs("easy-player");
$("button.vjs-big-play-button").trigger("click");
});
} else {
$v.find("video source").attr("src",$.cookie("videoUrl")||"");
videojs("easy-player");
$("button.vjs-big-play-button").trigger("click");
}
})
}

$(function() {
$(".channel-title").text($.cookie("videoTitle") || "");
});
</script>
</body>

</html>
Loading

0 comments on commit 8578f88

Please sign in to comment.