You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
4.6 KiB

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://nbaxp.github.io/assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<style>
.col-6 {
border: 1px solid #666;
text-align: center;
}
video {
max-width: 100%;
height: 400px;
margin: 0 auto;
}
img {
display: inline-block;
height: 100px;
vertical-align: middle;
border: 1px solid gray;
}
</style>
<title>live</title>
</head>
<body>
<div id="app" class="container-lg px-3 my-5 markdown-body gitpages" style="overflow: hidden;">
<div class="container">
<div class="row"><a target="_blank" href="http://localhost:8080/console/">http://localhost:8080/console/</a>
</div>
<div class="row"><a target="_blank" href="http://localhost:8080/live/test/test.png">截图:<img
src="http://localhost:8080/live/test/test.png"></a></div>
<div class="row">
<div class="col-6">
<div class="input-group mt-3">
<input id="flvUrl" class="form-control" type="text" value="http://localhost:8080/live/test.flv">
<button id="playFlv" class="input-group-text">Play</button>
</div>
<video id="videoElement" muted autoplay controls></video>
</div>
<div class="col-6">
<div class="input-group mt-3">
<input id="hlsUrl" class="form-control" type="text"
value="http://localhost:8080/live/test.m3u8">
<button id="playHls" class="input-group-text">Play</button>
</div>
<video id="video" muted autoplay controls></video>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.5.0/dist/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.0.7/dist/hls.min.js"></script>
<script>
var flvPlayer;
var hlsPlayer;
function playFlv() {
var url = $('#flvUrl').val();
if (!flvjs.isSupported()) {
console.error('flvjs is not supported');
return;
}
if (flvPlayer) {
try {
flvPlayer.pause();
} catch (e) {
console.error(e);
}
flvPlayer.unload();
flvPlayer.detachMediaElement();
try {
flvPlayer.destroy();
} catch (e) {
console.error(e);
}
this.flvPlayer = null;
}
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: url,
isLive: true,
cors: true
}, {
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 1,
fixAudioTimestampGap: false
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
<script>
var hlsPlayer;
function playHls() {
if (hlsPlayer) {
hlsPlayer.destroy();
hlsPlayer = null;
}
var videoSrc = $('#hlsUrl').val();
var video = document.getElementById('video');
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
} else if (Hls.isSupported()) {
hlsPlayer = new Hls();
hlsPlayer.loadSource(videoSrc);
hlsPlayer.attachMedia(video);
}
else {
console.error('hls is not supported');
}
}
</script>
<script>
$('#playFlv').click(function () {
playFlv();
});
$('#playHls').click(function () {
playHls();
});
</script>
<script>
playFlv();
playHls();
</script>
</body>
</html>