<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Player de Vídeo com Proporção de Aspecto Ajustável</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<style>
.video-container {
position: relative;
overflow: hidden;
width: 100%;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}
.plyr {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="video-container">
<div class="video-wrapper">
<video id="player" playsinline controls>
<source src="https://r.mjh.nz/PlutoTV/5f997e44949bc70007a6941e-alt.m3u8" type="video/mp4" />
<!-- Mais fontes de vídeo aqui -->
</video>
</div>
</div>
<button onclick="changeAspectRatio('16-9')">16:9</button>
<button onclick="changeAspectRatio('4-3')">4:3</button>
<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
<script>
const player = new Plyr('#player');
function changeAspectRatio(ratio) {
var wrapper = document.querySelector('.video-wrapper');
if (ratio === '16-9') {
wrapper.style.paddingBottom = '56.25%'; // 16:9 Aspect Ratio
} else if (ratio === '4-3') {
wrapper.style.paddingBottom = '75%'; // 4:3 Aspect Ratio
}
}
</script>
</body>
</html>
