JSFiddle - React, Tailwind, and code Playground

by Shane

HTML

<link rel="stylesheet" href="//vjs.zencdn.net/5.11.6/video-js.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//vjs.zencdn.net/5.11.6/video.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.5.3/videojs-contrib-hls.min.js"></script>
<div id="video-wrapper">
  <video id="hls-video-player" class="video-js vjs-default-skin" controls width="640" height="264">
  </video>
</div>

<button id="reload">reload</button>

JavaScript

var player = videojs('hls-video-player');

function initPlayer() {
   //debugger;
   player.src([
   		{type:"application/x-mpegurl", src: "https://a.sellpoint.net/dev/a/AG8N1Mmo/playlist.AG8N1Mmo.m3u8"}
   ]);
}

initPlayer();

function recreatePlayer() {
   //debugger;
   player.dispose();
   $('#video-wrapper').empty();
   $('#video-wrapper').html('<video id="hls-video-player" class="video-js vjs-default-skin" controls width="640" height="264"></video>');
   player = videojs('hls-video-player');
   initPlayer();
}

$('#reload').on('click', recreatePlayer);