| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
- <style type="text/css">
- body {background-color: #f1f0f5;}
- table,tr,td,th {border: 0px; color: #6e6e6e; font-size: 14px; margin: 0px; padding:0px; border-spacing:0px; border-style:none; border-collapse:collapse;}
- p {margin: 20px auto 20px auto;text-align: center;}
- video {margin: 20px;text-align: center;}
- .timenum {color: #1993c7; font-size: 24px;}
- .ui-content {margin: 0px; padding: 0px; background-color: #ffffff; }
- .gray {
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- filter: grayscale(100%);
- filter: gray;
- opacity:0.7;//通过改变透明度来调节灰色的程度
- }
- </style>
- <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
- <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
- <script type="text/javascript">
- var GetRequest = function() {
- var url = location.search; //获取url中"?"符后的字串
- var theRequest = new Object();
- if (url.indexOf("?") != -1) {
- var str = url.substr(1);
- strs = str.split("&");
- for (var i = 0; i < strs.length; i++) {
- theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
- }
- }
- return theRequest;
- }
- var reload = function(){
- var video1 = document.getElementById('video1');
- video1.innerHTML='';
- video1.width = $(window).width();
- video1.height = $(window).width()*3/4;
- video1.style.margin = '0px';
- video1.style.padding = '0px';
- var src = document.createElement("source");
- src.setAttribute('src','http://47.103.74.123/hls/'+$("#device").val()+'.m3u8');
- src.setAttribute('type','application/vnd.apple.mpegurl');
- video1.appendChild(src);
- video1.load();
- video1.play();
- }
- var closeme = function(){
- window.location='/sc/#pagethree';
- }
- $(document).ready(function(){
- var Request = new Object();
- Request = GetRequest();
- var id = Request["device"];
- $("#device").val(id);
- $("#deviceid").html(id);
- reload();
- })
- </script>
- </head>
- <body>
- <div data-role="page" id="pageone">
- <div data-role="header" data-theme="b">
- <a href="#" class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-left" onclick="closeme()">返回</a>
- <h1>实时监控</h1>
- <a href="#" class="ui-btn ui-icon-refresh ui-btn-icon-notext ui-btn-right" onclick="reload()">刷新</a>
- </div>
- <div id="webinfo" data-role="content" class="ui-content">
- <table width="100%" style="border-top: 5px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;">
- <tr>
- <th style="width:120px;">设备编号：</th><td id="deviceid"></td>
- </tr>
- </table>
- <video muted controls="controls" id="video1" width="320" height="240" loop="loop" autoplay="autoplay">
- </video>
- </div>
- <input type="hidden" id="device" name="device" value="">
- </body>
- </html>
|
