| | |
| | | <!DOCTYPE html> |
| | | <!DOCTYPE html> |
| | | <html> |
| | | |
| | | <head> |
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| | | <title>Jessibuca 1.0</title> |
| | | <meta charset="utf-8" /> |
| | | <meta charset="utf-8"/> |
| | | <link rel="stylesheet" href="css/index.css"> |
| | | <style> |
| | | .btn { |
| | | display: inline-block; |
| | |
| | | </head> |
| | | |
| | | <body> |
| | | <div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px"> |
| | | <div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px"> |
| | | </div> |
| | | |
| | | |
| | | <div id="progressTime"></div> |
| | | <div class="btn-wrapper" id="playDom"> |
| | | <button class="btn" id="play">播放</button> |
| | | </div> |
| | | <div class="btn-wrapper btn-wrapper2" id="stopDom" style="display: none"> |
| | | <div style="margin-top: 5px"> |
| | | <button class="btn btn-danger" id="stop">结束</button> |
| | | </div> |
| | | <div class="btn-wrapper" id="playDom"> |
| | | <button class="btn" id="play">播放</button> |
| | | </div> |
| | | <div class="btn-wrapper btn-wrapper2" id="stopDom" style="display: none"> |
| | | <div style="margin-top: 5px"> |
| | | <button class="btn btn-danger" id="stop">结束</button> |
| | | </div> |
| | | </div> |
| | | <button class="btn" onclick="h5lc.fullscreen=true">全屏</button> |
| | | <div id="logout" class="logs"> |
| | | </div> |
| | | </div> |
| | | <button class="btn" onclick="h5lc.fullscreen=true">全屏</button> |
| | | <div id="logout" class="logs"> |
| | | </div> |
| | | |
| | | <script src="./ajax.js"></script> |
| | | <script src="./renderer.js"></script> |
| | | <script> |
| | | onerror = handleErr; |
| | | var txt = ""; |
| | | window.onkeydown = function () { |
| | | h5lc.fullscreen = false |
| | | <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> |
| | | <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; |
| | | |
| | | onerror = handleErr; |
| | | var txt = ""; |
| | | window.onkeydown = function () { |
| | | h5lc.fullscreen = false |
| | | } |
| | | var $play = document.getElementById('play'); |
| | | var $stop = document.getElementById('stop'); |
| | | var $playDom = document.getElementById('playDom'); |
| | | var $stopDom = document.getElementById('stopDom'); |
| | | var container = document.getElementById("container"); |
| | | var isPlaying = false; |
| | | disabledMouseWheel(container); |
| | | 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}); |
| | | |
| | | |
| | | $("#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); |
| | | } |
| | | var $play = document.getElementById('play'); |
| | | var $stop = document.getElementById('stop'); |
| | | var $playDom = document.getElementById('playDom'); |
| | | var $stopDom = document.getElementById('stopDom'); |
| | | var container = document.getElementById("container"); |
| | | var isPlaying = false; |
| | | disabledMouseWheel(container); |
| | | 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 }); |
| | | }); |
| | | $(".progressTime-left-b-start").on("click", function () { |
| | | if(currentTimer){ |
| | | $(this).addClass("stop"); |
| | | |
| | | 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; |
| | | $playDom.style.display = 'none'; |
| | | $stopDom.style.display = 'block'; |
| | | } |
| | | $play.addEventListener('click', function () { |
| | | if (isPlaying) { |
| | | return; |
| | | } |
| | | isPlaying = true; |
| | | play(); |
| | | $playDom.style.display = 'none'; |
| | | $stopDom.style.display = 'block'; |
| | | }, false); |
| | | |
| | | $stop.addEventListener('click', function () { |
| | | if (!isPlaying) { |
| | | return; |
| | | } |
| | | |
| | | isPlaying = false; |
| | | stop(); |
| | | |
| | | $playDom.style.display = 'block'; |
| | | $stopDom.style.display = 'none'; |
| | | }, false); |
| | | |
| | | |
| | | function play(firstResponseIp) { |
| | | //h5lc.play("ws://" + (firstResponseIp || source) + ":8080/live/" + stream) |
| | | //h5lc.play("ws://pull2.afb1188.com/live/" + stream + ".flv") |
| | | //h5lc.play("ws://localhost:8080/live/" + stream) |
| | | h5lc.play("ws://localhost:8080/live/test.flv") |
| | | // h5lc.play("ws://119.9.118.39:8080/live/user1", canvas) |
| | | // h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas) |
| | | // h5lc.play("ws://localhost:8080/live/test.flv", canvas) |
| | | |
| | | } |
| | | function getFastCdnFromList(ipList) { |
| | | ipList = ipList || []; |
| | | var firstResponseIp = ''; |
| | | |
| | | for (var i = 0, len = ipList.length; i < len; i++) { |
| | | var tempIp = ipList[i].name; |
| | | var reqHref = 'http://' + tempIp + '/test'; |
| | | var request = _ajax.get(reqHref); |
| | | request.then(function (data) { |
| | | if (!firstResponseIp) { |
| | | firstResponseIp = tempIp; |
| | | // 直接可以播放了。 |
| | | play(firstResponseIp); |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | function stop() { |
| | | 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 |
| | | $.ajax({ |
| | | url: ""+"?param=", |
| | | async: false,//同步方式发送请求,true为异步发送 |
| | | type: "GET", |
| | | data: {}, |
| | | success: function (result) { |
| | | alert(result); |
| | | } |
| | | qArr = search.substr(1).split("&") |
| | | }); |
| | | |
| | | } |
| | | }); |
| | | $(".progressTime-left-b-start stop").on("click", function () { |
| | | $(this).removeClass("stop"); |
| | | }); |
| | | |
| | | 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; |
| | | $playDom.style.display = 'none'; |
| | | $stopDom.style.display = 'block'; |
| | | } |
| | | $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(); |
| | | $playDom.style.display = 'none'; |
| | | $stopDom.style.display = 'block'; |
| | | }, false); |
| | | |
| | | $stop.addEventListener('click', function () { |
| | | if (!isPlaying) { |
| | | return; |
| | | } |
| | | |
| | | isPlaying = false; |
| | | $.get("http://127.0.0.1:8088/monica/video/stop?param=live/test", function () { |
| | | alert("视频流已关闭"); |
| | | h5lc.close() |
| | | } |
| | | ); |
| | | //stop(); |
| | | |
| | | for (var i = 0; i < qArr.length; i++) { |
| | | $playDom.style.display = 'block'; |
| | | $stopDom.style.display = 'none'; |
| | | }, false); |
| | | |
| | | var firstPos = qArr[i].indexOf('='); |
| | | key[qArr[i].slice(0, firstPos)] = qArr[i].slice(firstPos + 1) |
| | | |
| | | function play(firstResponseIp) { |
| | | //h5lc.play("ws://" + (firstResponseIp || source) + ":8080/live/" + stream) |
| | | //h5lc.play("ws://pull2.afb1188.com/live/" + stream + ".flv") |
| | | //h5lc.play("ws://localhost:8080/live/" + stream) |
| | | h5lc.play("ws://172.16.30.113:8082/live/video1.flv") |
| | | //h5lc.play("ws://localhost:8072/live/test.flv") |
| | | // h5lc.play("ws://119.9.118.39:8080/live/user1", canvas) |
| | | // h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas) |
| | | // h5lc.play("ws://localhost:8080/live/test.flv", canvas) |
| | | |
| | | } |
| | | |
| | | function getFastCdnFromList(ipList) { |
| | | ipList = ipList || []; |
| | | var firstResponseIp = ''; |
| | | |
| | | for (var i = 0, len = ipList.length; i < len; i++) { |
| | | var tempIp = ipList[i].name; |
| | | var reqHref = 'http://' + tempIp + '/test'; |
| | | var request = _ajax.get(reqHref); |
| | | request.then(function (data) { |
| | | if (!firstResponseIp) { |
| | | firstResponseIp = tempIp; |
| | | // 直接可以播放了。 |
| | | play(firstResponseIp); |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | function stop() { |
| | | 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("&") |
| | | } |
| | | |
| | | if (name) { |
| | | 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 { |
| | | if (url) { |
| | | return key[name] |
| | | } else { |
| | | return key |
| | | } |
| | | return key |
| | | } |
| | | } |
| | | } |
| | | |
| | | function disabledMouseWheel(ele) { |
| | | if (ele.addEventListener) { |
| | | ele.addEventListener('DOMMouseScroll', scrollFunc, false); |
| | | } //W3C |
| | | ele.onmousewheel = scrollFunc; //IE/Opera/Chrome |
| | | } |
| | | function disabledMouseWheel(ele) { |
| | | if (ele.addEventListener) { |
| | | ele.addEventListener('DOMMouseScroll', scrollFunc, false); |
| | | } //W3C |
| | | ele.onmousewheel = scrollFunc; //IE/Opera/Chrome |
| | | } |
| | | |
| | | function scrollFunc(evt) { |
| | | evt = evt || window.event; |
| | | if (evt.preventDefault) { |
| | | // Firefox |
| | | evt.preventDefault(); |
| | | evt.stopPropagation(); |
| | | } else { |
| | | // IE |
| | | evt.cancelBubble = true; |
| | | evt.returnValue = false; |
| | | } |
| | | return false; |
| | | function scrollFunc(evt) { |
| | | evt = evt || window.event; |
| | | if (evt.preventDefault) { |
| | | // Firefox |
| | | evt.preventDefault(); |
| | | evt.stopPropagation(); |
| | | } else { |
| | | // IE |
| | | evt.cancelBubble = true; |
| | | evt.returnValue = false; |
| | | } |
| | | return false; |
| | | } |
| | | |
| | | function handleErr(msg, url, l) { |
| | | txt = "There was an error on this page.\n\n"; |
| | | txt += "Error: " + msg + "\n"; |
| | | txt += "URL: " + url + "\n"; |
| | | txt += "Line: " + l + "\n\n"; |
| | | document.getElementById("logout").innerHTML += txt + "<br>"; |
| | | return true; |
| | | } |
| | | </script> |
| | | function handleErr(msg, url, l) { |
| | | txt = "There was an error on this page.\n\n"; |
| | | txt += "Error: " + msg + "\n"; |
| | | txt += "URL: " + url + "\n"; |
| | | txt += "Line: " + l + "\n\n"; |
| | | document.getElementById("logout").innerHTML += txt + "<br>"; |
| | | return true; |
| | | } |
| | | </script> |
| | | |
| | | </body> |
| | | |