Tesatt


SUBMITTED BY: BLINDER

DATE: May 12, 2024, 2:27 p.m.

UPDATED: May 12, 2024, 4:12 p.m.

FORMAT: Text only

SIZE: 1.4 kB

HITS: 336

  1. <!DOCTYPE html>
  2. <html lang="pt">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Player de Vídeo com Proporção de Aspecto Ajustável</title>
  6. <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
  7. <style>
  8. .video-container {
  9. position: relative;
  10. overflow: hidden;
  11. width: 100%;
  12. }
  13. .video-wrapper {
  14. position: relative;
  15. padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  16. }
  17. .plyr {
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="video-container">
  28. <div class="video-wrapper">
  29. <video id="player" playsinline controls>
  30. <source src="https://r.mjh.nz/PlutoTV/5f997e44949bc70007a6941e-alt.m3u8" type="video/mp4" />
  31. <!-- Mais fontes de vídeo aqui -->
  32. </video>
  33. </div>
  34. </div>
  35. <button onclick="changeAspectRatio('16-9')">16:9</button>
  36. <button onclick="changeAspectRatio('4-3')">4:3</button>
  37. <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
  38. <script>
  39. const player = new Plyr('#player');
  40. function changeAspectRatio(ratio) {
  41. var wrapper = document.querySelector('.video-wrapper');
  42. if (ratio === '16-9') {
  43. wrapper.style.paddingBottom = '56.25%'; // 16:9 Aspect Ratio
  44. } else if (ratio === '4-3') {
  45. wrapper.style.paddingBottom = '75%'; // 4:3 Aspect Ratio
  46. }
  47. }
  48. </script>
  49. </body>
  50. </html>

comments powered by Disqus