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
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> |