最近遇到了在web上播放直播的需求，直播可支持m3u8视频格式，所以尝试了一下在html中播放m3u8视频，内容如下
    值得注意的是我们需要依赖hls.js

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         html, body {
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.     </style>
    14. </head>
    15. <body>
    16.     <!-- <video id="video" controls width="100%" height="211"></video> -->
    17.     <video x5-video-player-type="h5-page" x5-video-player-fullscreen="true" preload="auto" controls controlslist="nodownload" style="width: 100%; height: 211px;" playsinline="" webkit-inline="" webkit-playsinline="" x-webkit-airplay="allow" height="211" id="video"></video>
    18.     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    19.     <script>
    20.         var video = document.getElementById('video');
    21.         if(Hls.isSupported()) {
    22.             var hls = new Hls();
    23.             // hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
    24.             hls.loadSource('http://v3bj.weizan.cn/11891857/192943029237849739/replay.1612264946.67870977.m3u8');
    25.             hls.attachMedia(video);
    26.             hls.on(Hls.Events.MANIFEST_PARSED,function() {
    27.             video.play();
    28.         });
    29.         } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    30.             // video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    31.             video.src = 'http://v3bj.weizan.cn/11891857/192943029237849739/replay.1612264946.67870977.m3u8';
    32.             video.addEventListener('loadedmetadata',function() {
    33.             video.play();
    34.             });
    35.         }
    36.     </script>
    37. </body>
    38. </html>