JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/plyr.css" />

<hr />
<form id="form">
  <label for="video">Video URL/m3u8:</label>
  <input type="text" name="video" id="video" placeholder=".m3u8 or .mp4 url" />

  <label for="subtitle">Subtitles URL:</label>
  <input type="text" name="subtitle" id="subtitle" placeholder="URL to subtitles" />

  <input type="submit" value="Load" />
</form>
Hit "Load" with default values to load video: <a href="https://rumble.com/v5iy5t9-dr-sucharit-bhakdi-talks-with-dr-jj-couey.html">https://rumble.com/v5iy5t9-dr-sucharit-bhakdi-talks-with-dr-jj-couey.html</a>
<label for="messages"></label>
<label for="error"></label>

<hr />
<div id="container">
  <div id="player" />
</div>

CSS

form {
  margin-top: 10px;
}

input[type='text'] {
  padding: 5px 10px;
  border-radius: 5px;
  width: 100%;
  font-size: 16px;
}

input[type='submit'] {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #349e2f;
  color: white;
  font-size: 16px;
}

JavaScript

import { VidstackPlayerLayout, VidstackPlayer } from 'https://cdn.vidstack.io/player';

async function createPlayer(video, subs) {
	console.log(`createPlayer()`);
	console.log(`video: ${video}`);
	console.log(`subs: ${subs}`);
  
  let container = document.getElementById("container");
  container.innerHTML = '<div id="player" />';
  
  const player = await VidstackPlayer.create({
      target: '#player',
      title: 'Player',
      src: video ? video.trim() : "",
      poster: 'https://1a-1791.com/video/s8/1/T/F/T/6/TFT6t.qR4e-small-Dr-Sucharit-Bhakdi-talks-wi.jpg',
      layout: new VidstackPlayerLayout(),
    });
	
  if (subs) {
  	console.log("Adding subs...");
    player.textTracks.add({
          src: subs.trim(),
          label: 'English',
          language: 'en-US',
          kind: 'subtitles',
          default: true,
    });
  }

	window.player = player;
}

// Sets up input to have a default value and to select all on focus.
function setupInput(id, value) {
	let input = document.getElementById(id);
  if (input) {
  	input.value = value;
    
    input.addEventListener("focus", function(event) { this.select(); });
  }
}

// Defaults.
const defaults = {
	video: 'https://1a-1791.com/video/s8/2/T/F/T/6/TFT6t.caa.mp4',
  subs: 'https://raw.githubusercontent.com/gigaohm/Stream.Transcripts/refs/heads/main/guest.speaking/MedicalDoctors4CovidEthicsIntl-CharlesKovess/v5gp0hp%20(2024-10-16)%20-%20Dr%20Sucharit%20Bhakdi%20talks%20with%20Dr%20JJ%20Couey%20%5BCharles%20Kovess%5D/v5gp0hp%20(2024-10-16)%20-%20Dr%20Sucharit%20Bhakdi%20talks%20with%20Dr%20JJ%20Couey%20%5BCharles%20Kovess%5D.diarized.vtt',
};
setupInput("video", defaults.video);
setupInput("subtitle", defaults.subs);

const form = document.getElementById('form');

form.addEventListener('submit', (event) => {
  // Prevent the form from submitting normally
  event.preventDefault();

  const formData = new FormData(form);
  createPlayer(formData.get("video"), formData.get("subtitle"));
});