Java网页m3u流媒体播放器代码

小九九 · 发表于 3 天前

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16:9 Window with HLS.js</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
}
.video-container {
flex: 1;
background-color: #000000; /* 黑色背景 */
display: flex;
justify-content: center;
align-items: center;
}
.program-list {
width: 200px;
background-color: #000; /* 黑色背景 */
opacity: 0.8; /* 透明度 */
overflow-y: auto;
padding: 10px;
transition: width 0.3s ease;
}
.program-list.collapsed {
width: 0;
padding: 0;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
}
.program-list ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.program-list li {
padding: 5px;
cursor: pointer;
}
.program-list li:hover {
background-color: #ddd;
}
.toggle-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background-color: #000;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.search-box {
margin: 10px;
}
.search-box input {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.play-prompt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="video-container" id="fullscreenWindow">
<video id="video" controls></video>
<div class="play-prompt" onclick="startPlayback()">点击播放</div>
</div>
<div class="program-list" id="programList">
<div class="search-box">
<input type="text" id="m3uUrl" placeholder="粘贴 M3U 链接">
<button onclick="loadM3UFile()">播放</button>
</div>
<ul>
</ul>
</div>
</div>
<div class="toggle-button" id="toggleButton">
☰
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.11/hls.min.js"></script>
<script>
// 获取视频元素
var video = document.getElementById('video');
var playPrompt = document.querySelector('.play-prompt');
// 检查浏览器是否支持 HLS
if (Hls.isSupported()) {
var hls = new Hls();
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Manifest parsed, ready to play');
playPrompt.style.display = 'block';
});
hls.on(Hls.Events.ERROR, function(event, data) {
console.error('HLS error', data);
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.addEventListener('loadedmetadata', function() {
console.log('Metadata loaded, ready to play');
playPrompt.style.display = 'block';
});
} else {
console.error('HLS is not supported');
}
// 获取节目列表元素
var programList = document.getElementById('programList');
var toggleButton = document.getElementById('toggleButton');
// 切换节目列表的显示状态
toggleButton.addEventListener('click', function() {
programList.classList.toggle('collapsed');
});
// 加载 M3U 文件并解析节目列表
function loadM3UFile() {
const m3uUrl = document.getElementById('m3uUrl').value;
if (m3uUrl) {
if (Hls.isSupported()) {
hls.loadSource(m3uUrl);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = m3uUrl;
} else {
console.error('HLS is not supported');
}
} else {
console.error('No M3U URL provided');
}
}
// 页面加载完成后获取 M3U 文件并解析节目列表
document.addEventListener('DOMContentLoaded', function() {
const m3uUrl = 'https://super.ffzy-online6.com/20240626/33675_8de06b98/2000k/hls/mixed.m3u8'; // 默认 M3U 链接
document.getElementById('m3uUrl').value = m3uUrl;
loadM3UFile();
});
// 用户点击提示后开始播放
function startPlayback() {
video.play().then(() => {
playPrompt.style.display = 'none';
}).catch(error => {
console.error('Playback failed', error);
});
}
document.getElementById('fullscreenWindow').addEventListener('dblclick', function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
} else {
var elem = document.getElementById('fullscreenWindow');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
});
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

Java网页m3u流媒体播放器代码

扫码关注左侧公众号，每月定期发送扩容福利码。