时间戳

首页 > 解决方案 > 如何在 javascript videoplayer 中添加自动质量选择器

javascript - 如何在 javascript videoplayer 中添加自动质量选择器

问题描述

如何在此视频播放器中添加自动/自适应质量选择器选项，以及它如何还支持 akamaihd m3u8 链接？

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
  <link rel="stylesheet" href="http://cdn.plyr.io/3.5.6/plyr.css">
  <style type="text/css">
    .plyr {
      max-width: 400px
    }
  </style>
</head>

<body>

  <center>
    <div style="responsive-embed-container">
      <video id="player" class="plyr" controls preload="metadata">
<source src="https://akamaihd123515212121211urlhere.m3u8" type="application/x-mpegURL">
</video>
    </div>
  </center>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var player = new Plyr(document.getElementById("player"), {});
      player.on("ready", function(event) {
        var instance = event.detail.plyr;
        var hslSource = null;
        var sources = instance.media.querySelectorAll("source"),
          i;
        for (i = 0; i < sources.length; ++i) {
          if (sources[i].src.indexOf(".m3u8") > -1) {
            hslSource = sources[i].src
          }
        }
        if (hslSource !== null && Hls.isSupported()) {
          var hls = new Hls();
          hls.loadSource(hslSource);
          hls.attachMedia(instance.media);
          hls.on(Hls.Events.MANIFEST_PARSED, function() {
            console.log("MANIFEST_PARSED")
          })
        }
      })
    });
  </script>
</body>

</html>

是否可以仅使用前端语言在此播放器上添加这些功能。

标签： javascripthtmljquery

解决方案

推荐阅读