116 lines
3.7 KiB
HTML
116 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>视频监控</title>
|
|
</head>
|
|
<style>
|
|
video::-webkit-media-controls-timeline {
|
|
display: block;
|
|
}
|
|
|
|
/* 播放按钮 */
|
|
video::-webkit-media-controls-play-button {
|
|
display: none;
|
|
}
|
|
|
|
/* //进度条 */
|
|
video::-webkit-media-controls-timeline {
|
|
display: none;
|
|
}
|
|
|
|
/* //观看的当前时间 */
|
|
video::-webkit-media-controls-current-time-display {
|
|
display: none;
|
|
}
|
|
|
|
/* //剩余时间 */
|
|
video::-webkit-media-controls-time-remaining-display {
|
|
display: none;
|
|
}
|
|
|
|
/* //音量按钮 */
|
|
video::-webkit-media-controls-mute-button {
|
|
display: none;
|
|
}
|
|
|
|
video::-webkit-media-controls-toggle-closed-captions-button {
|
|
display: none;
|
|
}
|
|
|
|
/* //音量的控制条 */
|
|
video::-webkit-media-controls-volume-slider {
|
|
display: none;
|
|
}
|
|
|
|
video::-webkit-media-controls-overflow-button {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<script src="flv.min.js"></script>
|
|
<video id="videoElement" style="width: 381px;height: 214px;" muted controls="controls"></video>
|
|
|
|
<script>
|
|
var ip = window.location.host;
|
|
if (flvjs.isSupported()) {
|
|
// console.log("getParam('src')-", getParam('src'));
|
|
// console.log("getSrcParam('src')-", getSrcParam());
|
|
var videoElement = document.getElementById('videoElement');
|
|
var flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
isLive: true,
|
|
url: getNewurl(), //新逻辑
|
|
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '')
|
|
// url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
|
|
});
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
flvPlayer.load();
|
|
flvPlayer.play();
|
|
// 监听 video 标签的事件，防止用户手动暂停
|
|
videoElement.addEventListener('pause', function (e) {
|
|
e.preventDefault();
|
|
videoElement.play(); // 重新播放视频
|
|
});
|
|
}
|
|
|
|
function getParam(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
//search,查询？后面的参数，并匹配正则
|
|
var r = location.search.substr(1).match(reg);
|
|
if (r != null) return decodeURI(decodeURI(r[2]));
|
|
}
|
|
|
|
function getSrcParam() {
|
|
console.log("getSrcParam('src')-", location.search);
|
|
var srcIndex = location.search.indexOf('src=');
|
|
if (srcIndex !== -1) {
|
|
var srcSubstring = location.search.substring(srcIndex + 4); // 4 是 'src=' 的长度
|
|
return decodeURIComponent(srcSubstring);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getNewurl() {
|
|
let src = getSrcParam();
|
|
let url='ws://'+ip.split(':')[0]+':12309/rtsp';
|
|
// let url = 'ws://172.16.1.168:12309/rtsp';
|
|
// console.log('getNewurl',src)
|
|
if (src.includes("?")) {
|
|
let splitArray = src.split("?");
|
|
if (splitArray && splitArray.length > 0) {
|
|
url = url + '/2/' + splitArray[1] + '/?url=' + splitArray[0]
|
|
}
|
|
} else {
|
|
url = url + '/1/a/?url=' + src;
|
|
}
|
|
console.log('getNewurl-return', url)
|
|
return url;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |