20230328
This commit is contained in:
parent
0346b2201a
commit
4fbd9b0fde
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch101.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch102.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch103.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch104.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch105.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch106.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch107.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch108.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch109.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch110.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch201.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch202.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch203.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch204.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch205.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch206.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var videoFlvPlayer1 = videojs("video1");
|
||||
var videoFlvPlayer2 = videojs("video2");
|
||||
var videoFlvPlayer3 = videojs("video3");
|
||||
var videoFlvPlayer4 = videojs("video4");
|
||||
var videoFlvPlayer5 = videojs("video5");
|
||||
var videoFlvPlayer6 = videojs("video6");
|
||||
var videoFlvPlayer7 = videojs("video7");
|
||||
var videoFlvPlayer8 = videojs("video8");
|
||||
var videoFlvPlayer9 = videojs("video9");
|
||||
var videoFlvPlayer10 = videojs("video10");
|
||||
var videoFlvPlayer11 = videojs("video10");
|
||||
var videoFlvPlayer12 = videojs("video10");
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch1.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch2.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch3.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch20.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch5.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch6.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch7.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch9.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch18.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch19.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch12.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch13.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch14.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch15.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch16.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch17.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var videoFlvPlayer1 = videojs("video1");
|
||||
var videoFlvPlayer2 = videojs("video2");
|
||||
var videoFlvPlayer3 = videojs("video3");
|
||||
var videoFlvPlayer4 = videojs("video4");
|
||||
var videoFlvPlayer5 = videojs("video5");
|
||||
var videoFlvPlayer6 = videojs("video6");
|
||||
var videoFlvPlayer7 = videojs("video7");
|
||||
var videoFlvPlayer8 = videojs("video8");
|
||||
var videoFlvPlayer9 = videojs("video9");
|
||||
var videoFlvPlayer10 = videojs("video10");
|
||||
var videoFlvPlayer11 = videojs("video10");
|
||||
var videoFlvPlayer12 = videojs("video10");
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>视频播放软件</title>
|
||||
<link href="video-js.css" rel="stylesheet" />
|
||||
<style>
|
||||
.video-js .vjs-big-play-button{
|
||||
font-size: 2.5em;
|
||||
line-height: 2.3em;
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
-webkit-border-radius: 2.5em;
|
||||
-moz-border-radius: 2.5em;
|
||||
border-radius: 2.5em;
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115,133,159,.5);
|
||||
border-width: 0.15em;
|
||||
margin-top: -1.25em;
|
||||
margin-left: -1.75em;
|
||||
}
|
||||
/* 中间的播放箭头 */
|
||||
.vjs-big-play-button .vjs-icon-placeholder {
|
||||
font-size: 1.63em;
|
||||
}
|
||||
|
||||
/* 加载圆圈 */
|
||||
.vjs-loading-spinner {
|
||||
font-size: 2.5em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 1em;
|
||||
margin-top: -1em;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="videoContainer">
|
||||
<video
|
||||
id="videojs-flvjs-player"
|
||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="1024"
|
||||
height="768"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
||||
var flvUrl = "http://127.0.0.1:10800/flv/live/stream_3.flv";
|
||||
var player = null;
|
||||
|
||||
function initPlayer(){
|
||||
var videoContainer = document.getElementById("videoContainer");
|
||||
var pObjs = videoContainer.childNodes;
|
||||
for (var i = pObjs.length - 1; i >= 0; i--) {
|
||||
videoContainer.removeChild(pObjs[i]);
|
||||
}
|
||||
|
||||
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='1024' height='768' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
|
||||
|
||||
player = videojs('videojs-flvjs-player', {
|
||||
techOrder: ['html5', 'flvjs'],
|
||||
flvjs: {
|
||||
mediaDataSource: {
|
||||
isLive: true,
|
||||
cors: true,
|
||||
withCredentials: false,
|
||||
enableStashBuffer: false,
|
||||
autoCleanupSourceBuffer:true,
|
||||
autoCleanupMaxBackwardDuration:12,
|
||||
autoCleanupMinBackwardDuration:60,
|
||||
stashInitialSize:128
|
||||
},
|
||||
|
||||
},
|
||||
sources: [{
|
||||
src: flvUrl,
|
||||
type: 'video/x-flv'
|
||||
}],
|
||||
controls: true,
|
||||
preload: "none"
|
||||
},
|
||||
function onPlayerReady() {
|
||||
|
||||
player.on('error',function(){
|
||||
console.log('first source load fail')
|
||||
|
||||
player.src({
|
||||
src: flvUrl,
|
||||
type: 'video/x-flv'
|
||||
});
|
||||
|
||||
player.ready(function() {
|
||||
console.log('player ready')
|
||||
player.load();
|
||||
player.play();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
player.on('waiting',function(){
|
||||
console.log('stream wainting....');
|
||||
//player.pause();
|
||||
//player.dispose();
|
||||
//player = null;
|
||||
//initPlayer();
|
||||
});
|
||||
|
||||
|
||||
player.on('ended',function(){
|
||||
console.log('stream ended....');
|
||||
player.pause();
|
||||
player.dispose();
|
||||
player = null;
|
||||
initPlayer();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initPlayer();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.159:8080/app/ch1" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.3.245/transform/ch4.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "http://192.168.3.245/transform/ch4.live.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch5.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch7.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
!function e(t,r,o){function n(l,f){if(!r[l]){if(!t[l]){var u="function"==typeof require&&require;if(!f&&u)return u(l,!0);if(i)return i(l,!0);var a=new Error("Cannot find module '"+l+"'");throw a.code="MODULE_NOT_FOUND",a}var c=r[l]={exports:{}};t[l][0].call(c.exports,function(e){var r=t[l][1][e];return n(r||e)},c,c.exports,e,t,r,o)}return r[l].exports}for(var i="function"==typeof require&&require,l=0;l<o.length;l++)n(o[l]);return n}({1:[function(e,t,r){(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=function e(t,r,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,r);if(void 0===n){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,r,o)}if("value"in n)return n.value;var l=n.get;if(void 0!==l)return l.call(o)},f="undefined"!=typeof window?window.videojs:void 0!==e?e.videojs:null,u=function(e){return e&&e.__esModule?e:{default:e}}(f),a=u.default.getTech("Html5"),c=u.default.mergeOptions||u.default.util.mergeOptions,s={mediaDataSource:{},config:{}},p=function(e){function r(e,n){return t(this,r),e=c(s,e),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e,n))}return n(r,e),i(r,[{key:"setSrc",value:function(e){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy());var t=this.options_.mediaDataSource,r=this.options_.config;t.type=void 0===t.type?"flv":t.type,t.url=e,this.flvPlayer=window.flvjs.createPlayer(t,r),this.flvPlayer.attachMediaElement(this.el_),this.flvPlayer.load()}},{key:"dispose",value:function(){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy()),l(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"dispose",this).call(this)}}]),r}(a);p.isSupported=function(){return window.flvjs&&window.flvjs.isSupported()},p.formats={"video/flv":"FLV","video/x-flv":"FLV"},p.canPlayType=function(e){return p.isSupported()&&e in p.formats?"maybe":""},p.canPlaySource=function(e,t){return p.canPlayType(e.type)},p.VERSION="0.2.0",u.default.registerTech("Flvjs",p),r.default=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -59,13 +59,13 @@ window.PubScribe = function (topic, _callback,) {
|
|||
}
|
||||
}
|
||||
if (client == null) {
|
||||
|
||||
|
||||
client = mqtt.createConnect(() => {
|
||||
client.subscribe(['webdata'], {
|
||||
client.subscribe(['/SC/pub/uwb','/SC/pub/env'], {
|
||||
qos: 0
|
||||
}, (err) => {
|
||||
if (!err) {
|
||||
console.log("订阅成功0", ['webdata']);
|
||||
console.log("订阅成功0", ['/SC/pub/uwb','/SC/pub/env']);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
import mqtt from "mqtt";
|
||||
import Vue from 'vue'
|
||||
var vm = new Vue();
|
||||
|
||||
// function randomName(len) {
|
||||
// var len = len || 23;
|
||||
// var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
// var maxPos = chars.length;
|
||||
// var str = '';
|
||||
// for (let i = 0; i < len; i++) {
|
||||
// str += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
// }
|
||||
// return new Date().getTime() + str;
|
||||
// }
|
||||
class mqttHandle {
|
||||
constructor() {
|
||||
this.connect = {
|
||||
|
|
@ -12,18 +21,15 @@ class mqttHandle {
|
|||
cleanSession: true,
|
||||
connectTimeout: 7000, // 超时时间
|
||||
reconnectPeriod: 7000, // 重连时间间隔
|
||||
host:'172.16.1.51',
|
||||
port: '7788',
|
||||
host:'175.27.191.156',
|
||||
port: '10083',
|
||||
// 认证信息
|
||||
clientId: Number(new Date()).toString(),
|
||||
clientId:'mqttjs_23dda38f34',
|
||||
// clientId: newName,
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
username: 'site',
|
||||
password: 'site',
|
||||
}
|
||||
// this.subscription = {
|
||||
// topic: subscribe, //需要传入数组的包含订阅的名称
|
||||
// qos: 0,
|
||||
// }
|
||||
// this.connect.clientId = randomName(16);
|
||||
this.mqttClient = null;
|
||||
}
|
||||
/**
|
||||
|
|
@ -34,7 +40,7 @@ class mqttHandle {
|
|||
//配置链接
|
||||
const { host, port, endpoint, ...options } = this.connect;
|
||||
console.log("this.connect.host",this.connect.host)
|
||||
const connectUrl = 'ws://172.16.1.51:7788/';
|
||||
const connectUrl = 'ws://175.27.191.156:10083/mqtt';
|
||||
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
|
||||
// if (!client.connected) {
|
||||
// client.on('connect', function () {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="mapModuleApp" style="width:100%;height:100%">
|
||||
<iframe src="../static/unity/index.html" frameborder="0" style="width: 100%;height: 100%;"
|
||||
scrolling="no"></iframe>
|
||||
scrolling="no" id="unityModule" ></iframe>
|
||||
<!-- 标题 -->
|
||||
<div class="header">
|
||||
<div class="title"></div>
|
||||
|
|
@ -90,7 +90,7 @@ import VideoSurveillanceComponents from "./videoSurveillanceComponents";
|
|||
import ProgressComponents from "./progressComponents";
|
||||
import ManagementComponents from "./managementComponents";
|
||||
import VideoViewingComponents from "./videoViewingComponents";
|
||||
|
||||
import mqtt from "mqtt"; // mqtt协议
|
||||
import Swiper from "@/components/common/carousel";
|
||||
import Resize from '../utils/Resize.vue'
|
||||
import axios from 'axios';
|
||||
|
|
@ -340,17 +340,20 @@ export default {
|
|||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
this.createMqtt()
|
||||
// this.createMqtt()
|
||||
this.getWeather()
|
||||
window.setInterval(()=>{
|
||||
this.getTime()
|
||||
},1000)
|
||||
window.openBig = this.openBig;
|
||||
window.closeBig = this.closeBig;
|
||||
window.createMqtt = this.createMqtt;
|
||||
},
|
||||
methods: {
|
||||
|
||||
createMqtt() {
|
||||
|
||||
this.topicSends = ['webdata'];
|
||||
console.log("this.topicSends",this.topicSends)
|
||||
this.topicSends = ['/SC/pub/uwb','/SC/pub/env'];
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
|
|
@ -358,14 +361,25 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message",message)
|
||||
// const utf8decoder = new TextDecoder()
|
||||
// const u8arr = new Uint8Array(message)
|
||||
// const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
// const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// console.log("hert", msg) //msg为转换后的JSON数据
|
||||
// console.log("message", message)
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
} catch (error) {
|
||||
}
|
||||
break;
|
||||
case "/SC/pub/env":
|
||||
try {
|
||||
// console.log("环境message", message)
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("环境msg", msg) //msg为转换后的JSON数据
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
|
@ -424,12 +438,44 @@ export default {
|
|||
methods: ''
|
||||
}).then(res => {
|
||||
this.weatherItem = res.data.lives[0];
|
||||
this.weatherImg = changeWeatherImg(res.data.lives[0].weather)
|
||||
this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather)
|
||||
});
|
||||
},
|
||||
changeWeatherImg(weather){
|
||||
if(weather=='雾'){
|
||||
return require("@/assets/weather/gale.png")
|
||||
}else if(weather=='阴'){
|
||||
return require("@/assets/weather/Cloudy.png")
|
||||
}else if(weather=='多云'){
|
||||
return require("@/assets/weather/Cloudy.png")
|
||||
}else if(weather=='晴'){
|
||||
return require("@/assets/weather/sun.png")
|
||||
}else if(weather=='中雨'){
|
||||
return require("@/assets/weather/middlerain.png")
|
||||
}else if(weather=='小雨'){
|
||||
return require("@/assets/weather/rain.png")
|
||||
}else if(weather=='大雨'){
|
||||
return require("@/assets/weather/rainstorm.png")
|
||||
}else if(weather=='沙尘暴'){
|
||||
return require("@/assets/weather/sand.png")
|
||||
}else if(weather=='霾'){
|
||||
return require("@/assets/weather/smog.png")
|
||||
}else if(weather=='雷电'){
|
||||
return require("@/assets/weather/thunder.png")
|
||||
}else if(weather=='雷阵雨'){
|
||||
return require("@/assets/weather/shower.png")
|
||||
}else if(weather=='冰雹'){
|
||||
return require("@/assets/weather/hail.png")
|
||||
}else if(weather=='雪'){
|
||||
return require("@/assets/weather/snow.png")
|
||||
}else if(weather=='雨夹雪'){
|
||||
return require("@/assets/weather/rainsnow.png")
|
||||
}else if(weather=='中雪'){
|
||||
return require("@/assets/weather/mieddlesnow.png")
|
||||
}else if(weather=='大雪'){
|
||||
return require("@/assets/weather/bigsnow.png")
|
||||
}else if(weather=='小雪'){
|
||||
return require("@/assets/weather/rainlitter.png")
|
||||
}
|
||||
},
|
||||
changeMessage(val) {
|
||||
|
|
@ -486,6 +532,14 @@ changeWeatherImg(weather){
|
|||
|
||||
}
|
||||
},
|
||||
//放大
|
||||
openBig(){
|
||||
document.getElementById('unityModule').contentWindow.fullScreen();
|
||||
},
|
||||
//关闭放大
|
||||
closeBig(){
|
||||
document.getElementById('unityModule').contentWindow.exitFullScreen();
|
||||
},
|
||||
// 菜单点击
|
||||
childBoxClick(val) {
|
||||
this.menuType = val;
|
||||
|
|
@ -500,6 +554,11 @@ changeWeatherImg(weather){
|
|||
this.progressShow = true
|
||||
this.titLeftshow = true
|
||||
// this.$router.push('/progress')
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
} else if (val === 2) {
|
||||
//视频监控
|
||||
this.japIndex = '视频监控'
|
||||
|
|
@ -511,6 +570,11 @@ changeWeatherImg(weather){
|
|||
this.managementShow= false
|
||||
this.progressShow = false
|
||||
this.titLeftshow = true
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
} else if (val === 4) {
|
||||
//安全管理
|
||||
this.japIndex = '安全管理'
|
||||
|
|
@ -522,6 +586,11 @@ changeWeatherImg(weather){
|
|||
this.managementShow= true
|
||||
this.progressShow = false
|
||||
this.titLeftshow = true
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
} else if (val === 1) {
|
||||
//人员管理
|
||||
// this.$router.push('/personnel')
|
||||
|
|
@ -533,14 +602,21 @@ changeWeatherImg(weather){
|
|||
this.managementShow= false
|
||||
this.progressShow = false
|
||||
this.titLeftshow = true
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
}
|
||||
},
|
||||
switchDiv() {
|
||||
let that = this
|
||||
if (this.type) {
|
||||
console.log("11111")
|
||||
this.type = false;
|
||||
this.$refs.switchBtn.style.display = "none";
|
||||
} else {
|
||||
console.log("2222")
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
|
|
@ -1128,8 +1204,8 @@ position: absolute;
|
|||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
width: 17.5px;
|
||||
right: 85px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// background: url("~@/assets/pic/sun.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
this.createMqtt()
|
||||
// this.createMqtt()
|
||||
this.getWeather()
|
||||
// this.getTokenData()
|
||||
},
|
||||
|
|
@ -190,7 +190,7 @@ export default {
|
|||
},
|
||||
createMqtt() {
|
||||
|
||||
this.topicSends = ['webdata'];
|
||||
this.topicSends = ['/SC/pub/uwb'];
|
||||
console.log("this.topicSends",this.topicSends)
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
|
|
@ -199,7 +199,7 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message",message)
|
||||
// const utf8decoder = new TextDecoder()
|
||||
|
|
|
|||
|
|
@ -437,6 +437,12 @@ export default {
|
|||
methods: {
|
||||
disBox() {
|
||||
this.boxNone = !this.boxNone
|
||||
if(this.boxNone == true){
|
||||
|
||||
window.parent.closeBig();
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState='running'
|
||||
},
|
||||
goBack(val) {
|
||||
|
|
|
|||
|
|
@ -455,7 +455,7 @@ export default {
|
|||
methods: {
|
||||
createMqtt() {
|
||||
|
||||
this.topicSends = ['webdata'];
|
||||
this.topicSends = ['/SC/pub/uwb'];
|
||||
console.log("this.topicSends",this.topicSends)
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
|
|
@ -464,7 +464,7 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message",message)
|
||||
// const utf8decoder = new TextDecoder()
|
||||
|
|
@ -517,6 +517,7 @@ export default {
|
|||
this.tienum = val
|
||||
},
|
||||
disBox() {
|
||||
console
|
||||
this.boxNone = !this.boxNone
|
||||
this.$refs.screenBox.style.animationPlayState = 'running'
|
||||
|
||||
|
|
|
|||
|
|
@ -539,13 +539,13 @@ export default {
|
|||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
this.createMqtt();
|
||||
// this.createMqtt();
|
||||
this.getWeather();
|
||||
this.getTime();
|
||||
},
|
||||
methods: {
|
||||
createMqtt() {
|
||||
this.topicSends = ["webdata"];
|
||||
this.topicSends = ["/SC/pub/uwb"];
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
|
|
@ -554,7 +554,7 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message", message);
|
||||
// const utf8decoder = new TextDecoder()
|
||||
|
|
@ -609,7 +609,14 @@ export default {
|
|||
this.tienum = val;
|
||||
},
|
||||
disBox() {
|
||||
console.log("this.boxNone",this.boxNone)
|
||||
this.boxNone = !this.boxNone;
|
||||
if(this.boxNone == true){
|
||||
|
||||
window.parent.closeBig();
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState = "running";
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
|
|
|
|||
|
|
@ -379,12 +379,12 @@ export default {
|
|||
|
||||
},
|
||||
mounted(){
|
||||
this.createMqtt()
|
||||
// this.createMqtt()
|
||||
},
|
||||
methods: {
|
||||
createMqtt() {
|
||||
|
||||
this.topicSends = ['webdata'];
|
||||
this.topicSends = ['/SC/pub/uwb'];
|
||||
console.log("this.topicSends",this.topicSends)
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
|
|
@ -393,7 +393,7 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message",message)
|
||||
// const utf8decoder = new TextDecoder()
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.getUser();
|
||||
this.createMqtt();
|
||||
// this.createMqtt();
|
||||
// this.switchDiv();
|
||||
// window.onresize = () => {
|
||||
// return (() => {
|
||||
|
|
@ -440,7 +440,7 @@ export default {
|
|||
},
|
||||
|
||||
createMqtt() {
|
||||
this.topicSends = ["webdata"];
|
||||
this.topicSends = ["/SC/pub/uwb"];
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
window.PubScribe(this.topicSends, this.realInfo);
|
||||
},
|
||||
|
|
@ -449,7 +449,7 @@ export default {
|
|||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
case "webdata":
|
||||
case "/SC/pub/uwb":
|
||||
try {
|
||||
console.log("message", message);
|
||||
// const utf8decoder = new TextDecoder()
|
||||
|
|
@ -463,6 +463,12 @@ export default {
|
|||
},
|
||||
disBox() {
|
||||
this.boxNone = !this.boxNone;
|
||||
if(this.boxNone == true){
|
||||
|
||||
window.parent.closeBig();
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState = "running";
|
||||
},
|
||||
goBack(val) {
|
||||
|
|
|
|||
|
|
@ -430,7 +430,13 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
disBox() {
|
||||
|
||||
this.boxNone = !this.boxNone
|
||||
if(this.boxNone == true){
|
||||
window.parent.closeBig();
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState='running'
|
||||
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -118,14 +118,19 @@
|
|||
alert(message);
|
||||
});
|
||||
};
|
||||
|
||||
function OnSceneLoaded(){
|
||||
window.parent.createMqtt();
|
||||
}
|
||||
function fullScreen(){
|
||||
|
||||
if(unity!=null){
|
||||
console.log('fullScreen')
|
||||
unity.SendMessage("GameManager",'FullScreen');
|
||||
}
|
||||
}
|
||||
function exitFullScreen(){
|
||||
if(unity!=null){
|
||||
console.log('exitFullScreen')
|
||||
unity.SendMessage("GameManager",'ExitFullScreen');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue