|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Simple M3U8 Player with Quality Selection</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
margin: 0; |
|
|
background-color: #f0f0f0; |
|
|
flex-direction: column; |
|
|
} |
|
|
video { |
|
|
max-width: 100%; |
|
|
max-height: 80%; |
|
|
border: 1px solid #ccc; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
select { |
|
|
padding: 5px; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<video id="video" controls></video> |
|
|
<select id="qualitySelector"> |
|
|
<option value="">Select Quality</option> |
|
|
</select> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> |
|
|
<script> |
|
|
const video = document.getElementById('video'); |
|
|
const qualitySelector = document.getElementById('qualitySelector'); |
|
|
const videoUrl = 'https://vhoichoi.viewlift.com/Renditions/20241028/1730121916094_maaza_grand_pujo_parikrama_platform/hls/1730121916094_maaza_grand_pujo_parikrama_platform.m3u8'; |
|
|
if (Hls.isSupported()) { |
|
|
const hls = new Hls(); |
|
|
|
|
|
hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => { |
|
|
|
|
|
data.levels.forEach((level, index) => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = index; |
|
|
option.text = `${level.height}p (${(level.bitrate / 1000).toFixed(2)} kbps)`; |
|
|
qualitySelector.appendChild(option); |
|
|
}); |
|
|
}); |
|
|
hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => { |
|
|
console.log('Switched to level:', data.level); |
|
|
qualitySelector.value = data.level; |
|
|
}); |
|
|
|
|
|
qualitySelector.addEventListener('change', (event) => { |
|
|
const selectedLevel = event.target.value; |
|
|
if (selectedLevel !== "") { |
|
|
hls.startLevel = parseInt(selectedLevel); |
|
|
console.log('User selected level:', selectedLevel); |
|
|
} |
|
|
}); |
|
|
|
|
|
hls.loadSource(videoUrl); |
|
|
hls.attachMedia(video); |
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function() { |
|
|
console.log('Manifest parsed'); |
|
|
}); |
|
|
hls.on(Hls.Events.ERROR, function(event, data) { |
|
|
if (data.fatal) { |
|
|
switch (data.fatal) { |
|
|
case Hls.ErrorTypes.NETWORK_ERROR: |
|
|
console.error('Network error'); |
|
|
break; |
|
|
case Hls.ErrorTypes.MEDIA_ERROR: |
|
|
console.error('Media error'); |
|
|
break; |
|
|
case Hls.ErrorTypes.OTHER_ERROR: |
|
|
console.error('Other error'); |
|
|
break; |
|
|
default: |
|
|
console.error('Fatal error'); |
|
|
break; |
|
|
} |
|
|
} |
|
|
}); |
|
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) { |
|
|
|
|
|
video.src = videoUrl; |
|
|
} else { |
|
|
console.error('HLS.js is not supported in your browser.'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
