JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-contrib-hls Demo</title>
  <link href="/node_modules/video.js/dist/video-js.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .info {
      background-color: #eee;
      border: thin solid #333;
      border-radius: 3px;
      padding: 0 5px;
      margin: 20px 0;
    }
    input {
      margin-top: 15px;
      min-width: 450px;
      padding: 5px;
    }
  </style>

</head>
<body>

  <video id="videojs-contrib-hls-player" class="video-js vjs-default-skin" controls>
    <source src="https://valex.hlssrv.com/hls_serve/MPUIhK6BXmoGwQX0PhLwmg/1575316801/czBOOpkAAldSXaCPt53x/pl2.m3u8" type="application/x-mpegURL">
  </video>

  

  <script src="/node_modules/video.js/dist/video.js"></script>
  <script src="/dist/videojs-contrib-hls.js"></script>
  <script>
    (function(window, videojs) {
      var player = window.player = videojs('videojs-contrib-hls-player');

      // hook up the video switcher
      var loadUrl = document.getElementById('load-url');
      var url = document.getElementById('url');
      loadUrl.addEventListener('submit', function(event) {
        event.preventDefault();
        player.src({
          src: url.value,
          type: 'application/x-mpegURL'
        });
        return false;
      });
    }(window, window.videojs));
  </script>
</body>
</html>