66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>qhlsplayer</title>
|
||
<link rel="stylesheet" href="/src/style.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="player-container">
|
||
<h1>ZAPlayer</h1>
|
||
<div class="video-wrapper" style="width: 1280px; height: 720px;">
|
||
</div>
|
||
<div class="controls">
|
||
<input type="text" id="videoUrl" placeholder="输入视频地址" />
|
||
<button id="loadBtn">加载</button>
|
||
<button id="playBtn">播放</button>
|
||
<button id="pauseBtn">暂停</button>
|
||
<button id="stopBtn">停止</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="module" src="./src/main.js"></script>
|
||
<script type="text/javascript">
|
||
// 等待模块加载完成
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 绑定事件
|
||
const videoUrl = document.getElementById('videoUrl');
|
||
const loadBtn = document.getElementById('loadBtn');
|
||
const playBtn = document.getElementById('playBtn');
|
||
const pauseBtn = document.getElementById('pauseBtn');
|
||
const stopBtn = document.getElementById('stopBtn');
|
||
|
||
var player = new ZAPlayer('.video-wrapper',{type:'flv'}).player;
|
||
|
||
loadBtn.addEventListener('click', () => {
|
||
const url = videoUrl.value.trim();
|
||
if (url) {
|
||
player.load(url);
|
||
} else {
|
||
alert('请输入视频地址');
|
||
}
|
||
});
|
||
|
||
playBtn.addEventListener('click', () => {
|
||
player.play();
|
||
});
|
||
|
||
pauseBtn.addEventListener('click', () => {
|
||
player.pause();
|
||
});
|
||
|
||
stopBtn.addEventListener('click', () => {
|
||
player.stop();
|
||
});
|
||
|
||
// 示例M3U8地址（可替换为您自己的地址）
|
||
//videoUrl.value = 'http://192.168.1.201:9080/DS-2CD5026FWD20180811AACH220809006/0000000B/hls.m3u8';
|
||
videoUrl.value = 'http://192.168.1.200:10037/live/PUGE0hFBYluVe_01.flv?expired=20260323151552';
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |