How to Use Blob:url outside of <video>?

[Nolanrulesroblox]

What do you want to do with Hls.js?

Use Custom Video Player for Video.

want to change

<video id="video" src="blob:URL"></video>

to

<div class="video" id="video" data-video="blob:URL" data-type="video/mp4"></div>

if possible, just isolate the blob:URL itself, and be able to be used as variable. to be used for data-video

What have you tried so far?

attempt # 1:

  var video = document.getElementById('video');
  var videoSrc = 'http://localhost:3000/1.m3u8';
  //
  // First check for native browser HLS support
  //
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    //
    // If no native HLS support, check if HLS.js is supported
    //
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }

// HTML
<div id="video"></div>

attempt # 2:

  var video = document.getElementById('video');
  var videoSrc = 'http://localhost:3000/1.m3u8';
  var hls = new Hls();
  hls.loadSource(videoSrc);
  hls.attachMedia(video);
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
  });
// HTML
<div id="video"></div>

a few other ways, but nothing has worked

if this helps any:

i am newly learning HLS/DASH, i have not alot of idea what im doing, just trying to learn it

my current setup (server etc)
PHP 7.4 serving the m3u8 file
PHP Dev server
Video player in use Rtop Video Player (used with Jquery)

[robwalch]

HLS.js requires the use of an HTMLMediaElement also known as a <video/> or <audio/> element.