| | |
| | | |
| | | <body> |
| | | |
| | | <div id="jessibucaContainerHistory"> |
| | | <!-- 播放器 --> |
| | | <div class="player-wrapper" id="container"></div> |
| | | <!-- 时间轴 --> |
| | | <div id="progressTime"></div> |
| | | </div> |
| | | <div id="jessibucaContainerHistory"></div> |
| | | |
| | | |
| | | <script src="../js/renderer.js"></script> |
| | | <script src="../js/jquery.min.js"></script> |
| | | <script src="../js/jquery.progressTime.js"></script> |
| | | <script src="../js/history/historypler.js"></script> |
| | | |
| | | |
| | | <script> |
| | | var video_id; |
| | | var stream_path; |
| | | window.onkeydown = function () { |
| | | h5lc.fullscreen = false |
| | | }; |
| | | |
| | | 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); |
| | | } |
| | | let historypler =new Historypler({ |
| | | elem:"jessibucaContainerHistory", |
| | | ffurl:"../js/jessibuca/ff.js", |
| | | }); |
| | | $(".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"); |
| | | }); |
| | | |
| | | |
| | | 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 play_video(video_id) { |
| | | window.video_id = video_id; |
| | | window.stream_path = ""; |
| | | $.ajax({ |
| | | type: "get", |
| | | url: "../../webapi/media/historical?param=" + video_url+"&startTime="+currentTimer, |
| | | timeout: 5000, |
| | | async: false, |
| | | success: function (result) { |
| | | h5lc.onLoad = function () { |
| | | this.play(result.jessica); |
| | | } |
| | | window.streamPath = result.streamPath; |
| | | } |
| | | $(".progressTime-left-b-start").on("click", function () { |
| | | //TODO:historypler.playVideo(); |
| | | }); |
| | | } |
| | | |
| | | //关闭 |
| | | function close_video(streamPath) { |
| | | h5lc.destroy(); |
| | | if (streamPath) { |
| | | $.ajax({ |
| | | type: "get", |
| | | url: "../../webapi/media/stop?param=" + streamPath, |
| | | async: false, |
| | | success: function (result) { |
| | | } |
| | | //暂停 关闭流 |
| | | $(".progressTime-left-b-start stop").on("click", function () { |
| | | $(this).removeClass("stop"); |
| | | //TODO:historypler.closeVideo() |
| | | }); |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | | </body> |