<html>
|
<head>
|
<title>HTTP-Flv Test</title>
|
</head>
|
<!--<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
|
<script src="//cdn.bootcss.com/flv.js/1.5.0/flv.min.js" type="text/javascript"></script>-->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.js" integrity="sha512-3o5c2VekAg9ZZgcmddbSufUCJjqqY7uypQUa2JeCCgLjVKA1KOfqrMMGwbgP9tCszbZXhG7agevYBh2sm3I0JA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
<body style="background-color: #666666">
|
<div id="xxoo" style="background-color: #333333;border-radius: 10px; overflow: hidden; width: 400px; height: 300px;"></div>
|
<input id="tag">
|
<script type="text/javascript">
|
/**
|
* 创建一个FLV播放器，参数如下：
|
* {
|
* container : 视频容器元素
|
* muted : 是否静音
|
* url : HTTP-FLV地址
|
* }
|
*/
|
function FLVPlayer(opts)
|
{
|
var videoElement = document.createElement('VIDEO');
|
videoElement.autoplay = true;
|
videoElement.controls = false;
|
videoElement.muted = false;
|
videoElement.style.width = '100%';
|
videoElement.style.height = '100%';
|
opts.container.append(videoElement);
|
|
this.container = opts.container;
|
this.videoElement = videoElement;
|
this.httpFlvURL = opts.url;
|
|
this.mediaInfo = null;
|
this.play = null;
|
this.onPlayEvtListener = null;
|
this.onPauseEvtListener = null;
|
this.onStopEvtListener = null;
|
|
this.autoFastForward = opts.autoFastForward;
|
this.autoFastForwardInterval = null;
|
|
this.play = function()
|
{
|
if (this.player) return;
|
|
var self = this;
|
self.player = new flvjs.createPlayer({
|
type : 'flv',
|
url : self.httpFlvURL,
|
isLive : true,
|
enableWorker : true,
|
enableStashBuffer : true,
|
autoCleanupSourceBuffer : true,
|
autoCleanupMaxBackwardDuration : 5,
|
autoCleanupMinBackwardDuration : 1
|
});
|
|
self.player.on('media_info', function()
|
{
|
self.mediaInfo = self.player.mediaInfo;
|
});
|
|
self.player.on('statistics_info', function()
|
{
|
console.log(arguments);
|
});
|
|
var autoPlayTimer = null;
|
self.videoElement.addEventListener('player', function(e)
|
{
|
if (autoPlayTimer) clearInterval(autoPlayTimer);
|
if (self.onPlayEvtListener) self.onPlayEvtListener(self, e);
|
});
|
self.videoElement.addEventListener('dblclick', function()
|
{
|
if (self.videoElement.requestFullscreen) self.videoElement.requestFullscreen();
|
});
|
autoPlayTimer = setInterval(function()
|
{
|
try { self.player.play(); } catch(e) { clearInterval(autoPlayTimer); };
|
});
|
|
self.player.attachMediaElement(self.videoElement);
|
self.player.load();
|
self.player.play();
|
|
if (this.autoFastForward) this.autoFastForwardInterval = setInterval(function()
|
{
|
if (self.videoElement.buffered.length > 0 && self.videoElement.buffered.end(0) - self.videoElement.currentTime > 2)
|
{
|
console.log(self.videoElement.buffered.end(0) + "-" + self.videoElement.currentTime);
|
self.videoElement.currentTime = self.videoElement.buffered.end(0) - 1;
|
}
|
}, 1000);
|
};
|
|
this.fullscreen = function()
|
{
|
if (this.videoElement && this.videoElement.requestFullscreen)
|
this.videoElement.requestFullscreen();
|
};
|
|
this.onPlay = function(fn)
|
{
|
this.onPlayEvtListener = fn;
|
};
|
|
this.destroy = function()
|
{
|
this.player.destroy();
|
clearInterval(this.autoFastForwardInterval);
|
}
|
}
|
</script>
|
<script type="text/javascript">
|
if (location.hash)
|
{
|
var hash = location.hash.substring(1);
|
$('#tag').val(hash);
|
}
|
function playVideo()
|
{
|
var videoPlayer = new FLVPlayer({
|
container : $('#xxoo'),
|
url : '/video/' + $('#tag').val(),
|
// 自动快进追祯，但是可能会导致画面停顿
|
autoFastForward : false
|
});
|
videoPlayer.play();
|
}
|
</script>
|
<button onclick="playVideo()">Play Video</button>
|
</body>
|
</html>
|
