<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
    //var url = 'http://cloudvod1.oss-cn-shenzhen.aliyuncs.com/FTSLL8HM437Z38WU111A/vod4/2018121001/1543902118/1543902118.m3u8?Signature=7V5EbsWhhxVF4HVzw%2BIGEZo67fk%3D&OSSAccessKeyId=LTAIyMkGfEdogyL9&x-oss-process=hls%2Fsign&Expires=1544780759'
    var url = 'https://apg.oss-cn-shenzhen.aliyuncs.com/testplay/1545101955.m3u8'
    var video = document.getElementById('video');
    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    }
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
        video.addEventListener('loadedmetadata', function () {
            video.play();
        });
    }
</script>
</body>
</html>