his.js播放m3u8视频流

通过官方文档和各位大佬们的博客，自制一个小demo，直接上代码了，但是这里会有一个问题：

这个问题是原因是，没有部署在服务器中，所以没有办法根据该页面的访问域名确定一个相对url，也就是说在blob后面本该是网址的地方是"null"，所以如果部署在服务器中，应该就不会存在这个问题了。

<button type="button" class="btn btn-success" id="bt" "bt()">播放</button>
<div style="width: 50%; height: 50%;">
    <video id="testVideo" src=""  controls preload></video>
</div>

//需要引入hls.js
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<script>
    $(function () {
        $('#testVideo').hide();
    });

    function bt() {
        loadVideo('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
        $('#bt').hide();
        $('#testVideo').show();
    }

    function loadVideo(vedio_url){
        var video = document.getElementById('testVideo');
        if(Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(vedio_url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = vedio_url;
            video.addEventListener('loadedmetadata',function() {
                video.play();
            });
        }
    }
</script>