124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
<!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>
|