2025120
This commit is contained in:
jiangrui
parent
b48854611e
commit
ba32ee6011
55
detail.html
55
detail.html
|
|
@ -4,10 +4,16 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<title>达州易涝点查询</title>
|
||||
<link rel="stylesheet" href="./css/video-js.min.css" />
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> -->
|
||||
<!-- <script src="./js/hls.js@latest.js"></script> -->
|
||||
<link
|
||||
href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!--播放器脚本文件-->
|
||||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
|
||||
|
||||
<script src="./js/msg.js"></script>
|
||||
<style>
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
}
|
||||
.content {
|
||||
/* padding: 20px 40px; */
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -62,7 +68,7 @@
|
|||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
/* height: 130px; */
|
||||
/* background: url("./img/layer.png") no-repeat; */
|
||||
|
|
@ -185,7 +191,7 @@
|
|||
.roll {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rollItem {
|
||||
|
|
@ -251,12 +257,15 @@
|
|||
left: 0;
|
||||
}
|
||||
.refresh {
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
border: 0;
|
||||
width: 66px;
|
||||
}
|
||||
.err {
|
||||
color: #e21e1e;
|
||||
}
|
||||
/* */
|
||||
/*
|
||||
.vjs-error .vjs-error-display {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -286,25 +295,24 @@
|
|||
.vjs-modal-dialog-content {
|
||||
display: none;
|
||||
}
|
||||
/* 自定义加载条的背景色和宽度 */
|
||||
.video-js .vjs-loading-bar {
|
||||
background: #f00; /* 红色加载条 */
|
||||
height: 10px; /* 加载条高度 */
|
||||
background: #f00;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* 自定义加载条的动画时长 */
|
||||
|
||||
.video-js .vjs-loading-bar .vjs-progress-control {
|
||||
animation-duration: 5s; /* 动画时间 */
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
/* 如果需要隐藏加载中的图标或文字 */
|
||||
|
||||
.video-js .vjs-loading-bar .vjs-loading-bar {
|
||||
position: relative; /* 如果需要覆盖定位 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-js .vjs-loading-bar .vjs-loading-bar::after {
|
||||
content: none; /* 隐藏加载文字 */
|
||||
}
|
||||
content: none;
|
||||
}*/
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script src="./js/api.js"></script>
|
||||
|
|
@ -330,7 +338,20 @@
|
|||
</head>
|
||||
<body>
|
||||
<!-- <div class="status"></div> -->
|
||||
<div class="videoBox">
|
||||
<!-- <div class="videoBox"> -->
|
||||
<video
|
||||
id="player-container-id"
|
||||
style="width: 100%"
|
||||
height="210"
|
||||
muted
|
||||
autoplay
|
||||
preload="auto"
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
></video>
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div class="videoBox">
|
||||
<video
|
||||
webkit-playsinline="true"
|
||||
playsinline="true"
|
||||
|
|
@ -345,7 +366,7 @@
|
|||
<script>
|
||||
var player = videojs("myVideo");
|
||||
</script>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<!-- <div class="text_dwxx"></div>
|
||||
<div class="layer">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<title>达州雨季易涝点监控</title>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script src="./js/api.js"></script>
|
||||
<script
|
||||
|
|
|
|||
36
js/api.js
36
js/api.js
|
|
@ -71,10 +71,13 @@ function appendListDom(data) {
|
|||
$(`.videoList${type}`).prepend(title);
|
||||
console.log(1);
|
||||
data.map((item) => {
|
||||
let local =
|
||||
(localStorage.getItem("local") &&
|
||||
localStorage.getItem("local").split(",")) ||
|
||||
"0,0";
|
||||
// let local =
|
||||
// (localStorage.getItem("local") &&
|
||||
// localStorage.getItem("local").split(",")) ||
|
||||
// "107.487141,31.219671";
|
||||
let local = localStorage.getItem("local")
|
||||
? localStorage.getItem("local").split(",")
|
||||
: "107.487141,31.219671";
|
||||
|
||||
let dis = AMap.GeometryUtil.distance(local, [
|
||||
item.longitude,
|
||||
|
|
@ -162,7 +165,9 @@ function getInfo(id) {
|
|||
<i class="icon_position1"></i> <span>${data.d.name}</span>
|
||||
</div>
|
||||
<span class="btn_status ${statusClass}">${status}</span>
|
||||
<div class="tip abs">如果监控长时间未成功播放，请刷新重试。<button onclick="refresh()" class="refresh">点击刷新</button></div>
|
||||
|
||||
|
||||
<div class="tip abs">如果监控播放失败，请刷新重试。<button onclick="refresh()" class="refresh">点击刷新</button><button onclick="window.history.back();" class="refresh" style="margin-left:10px"> 返回</button></div>
|
||||
</div>
|
||||
|
||||
<div class="text_yldgc"></div>
|
||||
|
|
@ -183,13 +188,26 @@ function getInfo(id) {
|
|||
</div>`;
|
||||
$(".content").append(str);
|
||||
if (data.c === 200) {
|
||||
console.log(data);
|
||||
player.src({
|
||||
// console.log(data);
|
||||
// player.src({
|
||||
// src: data.d.playUrl,
|
||||
// type: "application/x-mpegURL",
|
||||
// });
|
||||
|
||||
// player.play();
|
||||
|
||||
player = TCPlayer("player-container-id", {
|
||||
sources: [
|
||||
{
|
||||
src: data.d.playUrl,
|
||||
type: "application/x-mpegURL",
|
||||
},
|
||||
],
|
||||
licenseUrl:
|
||||
"https://license.vod2.myqcloud.com/license/v2/1300450518_1/v_cube.license",
|
||||
licenseKey: "9d62a2d4d9526c91d966b1376ca0bde4",
|
||||
});
|
||||
|
||||
player.play();
|
||||
// player.src(url); // url 播放地址
|
||||
|
||||
// var hls;
|
||||
// var video = document.getElementById("myVideo");
|
||||
|
|
|
|||
Loading…
Reference in New Issue