rui.jiang
/
yld_h5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

2025120

This commit is contained in:
jiangrui 2025-01-20 10:34:04 +08:00
parent b48854611e
commit ba32ee6011
3 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
detail.html
View File

@ -4,10 +4,16 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" /> <link rel="stylesheet" href="./css/video-js.min.css" />
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> -->
<!-- <script src="./js/hls.js@latest.js"></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> <script src="./js/msg.js"></script>
<style> <style>
@ -26,7 +32,7 @@
} }
.content { .content {
/* padding: 20px 40px; */ /* padding: 20px 40px; */
padding: 20px; padding: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -62,7 +68,7 @@
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
padding: 20px; padding: 15px;
width: 100%; width: 100%;
/* height: 130px; */ /* height: 130px; */
/* background: url("./img/layer.png") no-repeat; */ /* background: url("./img/layer.png") no-repeat; */
@ -185,7 +191,7 @@
.roll { .roll {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 15px; padding: 5px 15px;
box-sizing: border-box; box-sizing: border-box;
} }
.rollItem { .rollItem {
@ -251,12 +257,15 @@
left: 0; left: 0;
} }
.refresh { .refresh {
font-size: 12px; font-size: 16px;
border-radius: 6px;
border: 0;
width: 66px;
} }
.err { .err {
color: #e21e1e; color: #e21e1e;
} }
/* */ /*
.vjs-error .vjs-error-display { .vjs-error .vjs-error-display {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -286,25 +295,24 @@
.vjs-modal-dialog-content { .vjs-modal-dialog-content {
display: none; display: none;
} }
/* 自定义加载条的背景色和宽度 */
.video-js .vjs-loading-bar { .video-js .vjs-loading-bar {
background: #f00; /* 红色加载条 */ background: #f00;
height: 10px; /* 加载条高度 */ height: 10px;
} }
/* 自定义加载条的动画时长 */
.video-js .vjs-loading-bar .vjs-progress-control { .video-js .vjs-loading-bar .vjs-progress-control {
animation-duration: 5s; /* 动画时间 */ animation-duration: 5s;
} }
/* 如果需要隐藏加载中的图标或文字 */
.video-js .vjs-loading-bar .vjs-loading-bar { .video-js .vjs-loading-bar .vjs-loading-bar {
position: relative; /* 如果需要覆盖定位 */ position: relative;
} }
.video-js .vjs-loading-bar .vjs-loading-bar::after { .video-js .vjs-loading-bar .vjs-loading-bar::after {
content: none; /* 隐藏加载文字 */ content: none;
} }*/
</style> </style>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>
@ -330,7 +338,20 @@
</head> </head>
<body> <body>
<!-- <div class="status"></div> --> <!-- <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 <video
webkit-playsinline="true" webkit-playsinline="true"
playsinline="true" playsinline="true"
@ -345,7 +366,7 @@
<script> <script>
var player = videojs("myVideo"); var player = videojs("myVideo");
</script> </script>
</div> </div> -->
<div class="content"> <div class="content">
<!-- <div class="text_dwxx"></div> <!-- <div class="text_dwxx"></div>
<div class="layer"> <div class="layer">

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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/jquery.min.js"></script>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>
<script <script

36
js/api.js
View File

@ -71,10 +71,13 @@ function appendListDom(data) {
$(`.videoList${type}`).prepend(title); $(`.videoList${type}`).prepend(title);
console.log(1); console.log(1);
data.map((item) => { data.map((item) => {
let local = // let local =
(localStorage.getItem("local") && // (localStorage.getItem("local") &&
localStorage.getItem("local").split(",")) || // localStorage.getItem("local").split(",")) ||
"0,0"; // "107.487141,31.219671";
let local = localStorage.getItem("local")
? localStorage.getItem("local").split(",")
: "107.487141,31.219671";
let dis = AMap.GeometryUtil.distance(local, [ let dis = AMap.GeometryUtil.distance(local, [
item.longitude, item.longitude,
@ -162,7 +165,9 @@ function getInfo(id) {
<i class="icon_position1"></i> <span>${data.d.name}</span> <i class="icon_position1"></i> <span>${data.d.name}</span>
</div> </div>
<span class="btn_status ${statusClass}">${status}</span> <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>
<div class="text_yldgc"></div> <div class="text_yldgc"></div>
@ -183,13 +188,26 @@ function getInfo(id) {
</div>`; </div>`;
$(".content").append(str); $(".content").append(str);
if (data.c === 200) { if (data.c === 200) {
console.log(data); // console.log(data);
player.src({ // player.src({
// src: data.d.playUrl,
// type: "application/x-mpegURL",
// });
// player.play();
player = TCPlayer("player-container-id", {
sources: [
{
src: data.d.playUrl, 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 hls;
// var video = document.getElementById("myVideo"); // var video = document.getElementById("myVideo");