forked from Reisa/Reisaye
41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>简易流播放器</title>
|
|
<link href="https://vjs.zencdn.net/8.6.0/video-js.css" rel="stylesheet">
|
|
<script src="https://vjs.zencdn.net/8.6.0/video.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h3>流播放器</h3>
|
|
<input type="text" id="streamId" value="mystream" placeholder="输入流ID">
|
|
<button onclick="startPlay()">开始播放</button>
|
|
<div style="margin-top: 20px;">
|
|
<video id="player" class="video-js vjs-default-skin" controls width="800" height="450"></video>
|
|
</div>
|
|
|
|
<script>
|
|
let player = null;
|
|
|
|
function startPlay() {
|
|
const streamId = document.getElementById("streamId").value;
|
|
const playUrl = `/stream/${streamId}`;
|
|
|
|
// 销毁现有播放器
|
|
if (player) {
|
|
player.dispose();
|
|
}
|
|
|
|
// 创建新播放器
|
|
player = videojs('player', {
|
|
autoplay: true,
|
|
controls: true,
|
|
sources: [{
|
|
src: playUrl,
|
|
type: 'application/x-mpegURL'
|
|
}]
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|