| | |
|---|
| | | <title>Jessibuca【回放】</title> |
|---|
| | | <meta charset="utf-8"/> |
|---|
| | | <link rel="stylesheet" href="../css/progressTime.css"> |
|---|
| | | <link rel="stylesheet" href="../css/history/historyStyle.css"> |
|---|
| | | <link type="text/css" rel="stylesheet" href="../css/skin/jedate.css"> |
|---|
| | | <link type="text/css" rel="stylesheet" href="../css/jeLocalDate.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> |
|---|
| | | |
|---|
| | | <!-- 播放器 --> |
|---|
| | | <div class="player-wrapper" id="container" style="background-color: #0D0E1B;"></div> |
|---|
| | | <!-- 时间轴 --> |
|---|
| | | <div id="progressTime"></div> |
|---|
| | | <!--jessiebuca播放器 录像 --> |
|---|
| | | <div id="jessibucaContainerHistory"> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script src="../js/renderer.js"></script> |
|---|
| | | <script src="../js/jquery.min.js"></script> |
|---|
| | | <script src="../js/ajax.js"></script> |
|---|
| | | <script src="../js/renderer.js"></script> |
|---|
| | | <script src="../js/jedate.min.js"></script> |
|---|
| | | <script src="../js/jquery.progressTime.js"></script> |
|---|
| | | <script src="../js/history/historyComponent.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | var hourTimestamp = 3600 * 1000; |
|---|
| | | var dayTimestamp = hourTimestamp * 24; |
|---|
| | | var currentTimer; |
|---|
| | | |
|---|
| | | var container = document.getElementById("container"); |
|---|
| | | let decoder = queryParam('decoder') || 'ff'; |
|---|
| | | |
|---|
| | | var h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0}); |
|---|
| | | |
|---|
| | | |
|---|
| | | $("#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 = false; // 两秒之后再继续走播放条 |
|---|
| | | clearTimeout(timer); |
|---|
| | | }, 0); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | $(".progressTime-left-b-start").on("click", function () { |
|---|
| | | h5lc.play("ws://172.16.30.113:8082/live/ff80808178af424e0178af44e677000343616d657261.flv") |
|---|
| | | /* 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"); |
|---|
| | | let historyComponent = new HistoryComponent({ |
|---|
| | | elem: "jessibucaContainerHistory", |
|---|
| | | cameraId: "ff80808178af424e0178af44e677000343616d657261", |
|---|
| | | rtspUrl: "rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301", |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //关闭流 |
|---|
| | | //historyComponent.close(); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </body> |
|---|
