m3u8-video-js

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="script.js"></script>

<input type="text" id="url" style="width:100%" value="https://p2p.cy/Soe0Woo3/output-360p.m3u8"> <input type="button" id="btn" value="play">
<br><br>

<video id="video" class="video-js vjs-default-skin" preload="none" crossorigin="true" controls width="auto" height="320" controls>
</video>

script.js

$(document).ready(function() {
  $("#btn").on("click", function() {
    $("#video").html("<source src='"+ $("#url").val() +"' type='application/x-mpegURL'>");
    var ply = videojs("video");
    ply.play();
  });
});