espeon · October 16, 2020 07:48
diff --git a/index.html b/index.html
 <body>
 <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
  <script src="https://gist.githack.com/kanbaru/e049b1c99a27639f48146aeeb7acb70c/raw/a3c7b51b0dba1e09de20909a01768eb39c7b1cc6/plyr.min.js"></script>
  <script src="./script.js"></script>

  <div class="container">
    <video controls crossorigin playsinline >
      <source 
        type="application/x-mpegURL" 
        src="https://stream.mux.com/S5F00JLz00E9Is8lc9MICneE7sHoCmjuiaI01C6ssA9Xh4.m3u8"
      >
    </video>
  </div>
 </body>
diff --git a/script.js b/script.js
 document.addEventListener("DOMContentLoaded", () => {
  const video = document.querySelector("video");
  const source = video.getElementsByTagName("source")[0].src;

  // For more options see: https://github.com/sampotts/plyr/#options
  const defaultOptions = {};

  if (Hls.isSupported()) {
    // For more Hls.js options, see https://github.com/dailymotion/hls.js
    const hls = new Hls();
    hls.loadSource(source);

    // From the m3u8 playlist, hls parses the manifest and returns
    // all available video qualities. This is important, in this approach,
    // we will have one source on the Plyr player.
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
      const availableQualities = hls.levels.map((l) => l.height);
      availableQualities.unshift(0); //prepend 0 to quality array
      defaultOptions.quality = {
        default: 0, //Default - AUTO
        options: availableQualities,
        forced: true,
        onChange: (e) => updateQuality(e)
      };
      hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
        var span = document.querySelector(
          ".plyr__menu__container [data-plyr='quality'][value='0'] span"
        );
        var span = document.querySelector(
          ".plyr__menu__container [data-plyr='quality'][value='0'] span"
        );
        if (hls.autoLevelEnabled) {
          span.innerHTML = `Auto (${hls.levels[data.level].height}p)`;
        } else {
          span.innerHTML = `Auto`;
        }
      });
      var player = new Plyr(video, defaultOptions);
    });
    hls.attachMedia(video);
    window.hls = hls;
  } else {
    // default options with no quality update in case Hls is not supported
    const player = new Plyr(video, defaultOptions);
  }

  function updateQuality(newQuality) {
    if (newQuality === 0) {
      window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
          console.log("Auto quality selection");
    } else {
      window.hls.levels.forEach((level, levelIndex) => {
        if (level.height === newQuality) {
          console.log("Found quality match with " + newQuality);
          window.hls.currentLevel = levelIndex;
        }
      });
    }
  }
 });
diff --git a/style.css b/style.css
 .container {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
    width: 980px;
    box-shadow: 0 4px 8px 0 rgba(50, 50, 50, 0.2), 0 6px 20px 0 rgba(50, 50, 50, 0.19);
  font-family: Inter;
 }
 video {
 	width: 100%;
  box-shadow: 10px 10px 10px white;
 }

 body {
  background: #111;
  text-color: white;
 }
diff --git a/styles b/styles
 <link href="https://rsms.me/inter/inter.css?v=3.15" rel="stylesheet" />
diff --git a/xwkdbnm.markdown b/xwkdbnm.markdown
	<body>
	<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
	<script src="https://gist.githack.com/kanbaru/e049b1c99a27639f48146aeeb7acb70c/raw/a3c7b51b0dba1e09de20909a01768eb39c7b1cc6/plyr.min.js"></script>
	<script src="./script.js"></script>

	<div class="container">
	<video controls crossorigin playsinline >
	<source
	type="application/x-mpegURL"
	src="https://stream.mux.com/S5F00JLz00E9Is8lc9MICneE7sHoCmjuiaI01C6ssA9Xh4.m3u8"
	>
	</video>
	</div>
	</body>
	document.addEventListener("DOMContentLoaded", () => {
	const video = document.querySelector("video");
	const source = video.getElementsByTagName("source")[0].src;

	// For more options see: https://github.com/sampotts/plyr/#options
	const defaultOptions = {};

	if (Hls.isSupported()) {
	// For more Hls.js options, see https://github.com/dailymotion/hls.js
	const hls = new Hls();
	hls.loadSource(source);

	// From the m3u8 playlist, hls parses the manifest and returns
	// all available video qualities. This is important, in this approach,
	// we will have one source on the Plyr player.
	hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
	const availableQualities = hls.levels.map((l) => l.height);
	availableQualities.unshift(0); //prepend 0 to quality array
	defaultOptions.quality = {
	default: 0, //Default - AUTO
	options: availableQualities,
	forced: true,
	onChange: (e) => updateQuality(e)
	};
	hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
	var span = document.querySelector(
	".plyr__menu__container [data-plyr='quality'][value='0'] span"
	);
	var span = document.querySelector(
	".plyr__menu__container [data-plyr='quality'][value='0'] span"
	);
	if (hls.autoLevelEnabled) {
	span.innerHTML = `Auto (${hls.levels[data.level].height}p)`;
	} else {
	span.innerHTML = `Auto`;
	}
	});
	var player = new Plyr(video, defaultOptions);
	});
	hls.attachMedia(video);
	window.hls = hls;
	} else {
	// default options with no quality update in case Hls is not supported
	const player = new Plyr(video, defaultOptions);
	}

	function updateQuality(newQuality) {
	if (newQuality === 0) {
	window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
	console.log("Auto quality selection");
	} else {
	window.hls.levels.forEach((level, levelIndex) => {
	if (level.height === newQuality) {
	console.log("Found quality match with " + newQuality);
	window.hls.currentLevel = levelIndex;
	}
	});
	}
	}
	});
	.container {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: 980px;
	box-shadow: 0 4px 8px 0 rgba(50, 50, 50, 0.2), 0 6px 20px 0 rgba(50, 50, 50, 0.19);
	font-family: Inter;
	}
	video {
	width: 100%;
	box-shadow: 10px 10px 10px white;
	}

	body {
	background: #111;
	text-color: white;
	}