| | |
|---|
| | | <meta charset="utf-8"/> |
|---|
| | | <link rel="stylesheet" href="../css/font-awesome.min.css"> |
|---|
| | | <link rel="stylesheet" href="../css/controles.css"> |
|---|
| | | <link rel="stylesheet" href="../css/live/liveStyle.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> |
|---|
| | | |
|---|
| | | <!-- jessiebuca播放器 --> |
|---|
| | | <div class="wrap"> |
|---|
| | | <div class="content"> |
|---|
| | | <div class="player" onmouseover="playerShow()"onmouseout="playerHidden()"> |
|---|
| | | <div class="player-wrapper" id="container" style="background-color: #0D0E1B;"> |
|---|
| | | </div> |
|---|
| | | <div class="control"> |
|---|
| | | |
|---|
| | | <div class="fa fa-play" id="play"> |
|---|
| | | </div> |
|---|
| | | <div class="fa fa-stop" id="stop" style="display: none"> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <span class="progress"></span> |
|---|
| | | </div> |
|---|
| | | <div class="timer"> |
|---|
| | | <span class="progress_timer">00:00:00</span>/ |
|---|
| | | <span class="duration_timer">00:00:00</span> |
|---|
| | | </div> |
|---|
| | | <div class="fa fa-expand expand" onclick="h5lc.fullscreen=true"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="jessibucaContainer"> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script src="../js/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 src="../js/live/liveComponent.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | var hourTimestamp = 3600 * 1000; |
|---|
| | | var dayTimestamp = hourTimestamp * 24; |
|---|
| | | var currentTimer; |
|---|
| | | |
|---|
| | | |
|---|
| | | window.onkeydown = function () { |
|---|
| | | h5lc.fullscreen = false |
|---|
| | | } |
|---|
| | | var isLive=true; |
|---|
| | | var $play = document.getElementById('play'); |
|---|
| | | var $stop = document.getElementById('stop'); |
|---|
| | | var container = document.getElementById("container"); |
|---|
| | | var $progressTime = document.getElementById('progressTime'); |
|---|
| | | |
|---|
| | | var isPlaying = false; |
|---|
| | | let source = queryParam('source') || 'localhost'; |
|---|
| | | |
|---|
| | | var h5lc = new Jessibuca({container, decoder: "../js/ff/ff.js", videoBuffer: 0}); |
|---|
| | | |
|---|
| | | 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; |
|---|
| | | $play.style.display = 'none'; |
|---|
| | | $stop.style.display = 'inline'; |
|---|
| | | } |
|---|
| | | $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(); |
|---|
| | | $play.style.display = 'none'; |
|---|
| | | $stop.style.display = 'inline'; |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | $stop.addEventListener('click', function () { |
|---|
| | | if (!isPlaying) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | isPlaying = false; |
|---|
| | | //stop(); |
|---|
| | | |
|---|
| | | $play.style.display = 'inline'; |
|---|
| | | $stop.style.display = 'none'; |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | |
|---|
| | | function play(firstResponseIp) { |
|---|
| | | h5lc.play("ws://172.16.30.113:8082/live/video4.flv") |
|---|
| | | } |
|---|
| | | |
|---|
| | | function stop() { |
|---|
| | | $.get("http://127.0.0.1:8088/monica/video/stop?param=live/test", function () { |
|---|
| | | alert("视频流已关闭"); |
|---|
| | | h5lc.close() |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | 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("&") |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 playerShow(){ |
|---|
| | | if (isLive) { |
|---|
| | | $(".player .control").css("display","block") |
|---|
| | | }else { |
|---|
| | | $(".player .control").css("display","none") |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function playerHidden(){ |
|---|
| | | $(".player .control").css("display","none") |
|---|
| | | } |
|---|
| | | |
|---|
| | | let liveComponent = new LiveComponent({ |
|---|
| | | elem: "jessibucaContainer", |
|---|
| | | cameraId: "ff80808178af424e0178af44e677000343616d657261", |
|---|
| | | rtspUrl: "rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301", |
|---|
| | | }); |
|---|
| | | //关闭流 |
|---|
| | | //liveComponent.close(); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </body> |
|---|
