如何嵌入.m3u8链接？尝试Hls方案仍无法实现

我在嵌入.m3u8视频链接时遇到问题，已经查阅过同类问题但仍无法成功嵌入。尝试使用Hls播放器方案也无效，附上我的代码请求帮忙排查：

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    
</head>
<body>
   <video id="video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">

   </video>
</body>
</html>

我的JS代码 #

<script>
      if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('https://d26g5bnklkwsh4.cloudfront.net/adf856d9-a233-484b-a730-f7ac57c53aa5/master.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
      });
     }
     // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
     // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
     // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://d26g5bnklkwsh4.cloudfront.net/adf856d9-a233-484b-a730-f7ac57c53aa5/master.m3u8';
        video.addEventListener('canplay',function() {
          video.play();
        });
      }
    </script>

问题排查与修复方案 #

1. 脚本执行时机错误 #

你的JS代码如果在DOM未加载完成时执行，document.getElementById('video')会返回null，导致后续逻辑失效。必须等待DOM加载完成后再执行脚本，可通过将脚本放在<body>末尾或用DOMContentLoaded事件包裹实现。

2. 冗余的video-js配置 #

你给video标签添加了video-js类和data-setup="{}"属性，但没有引入Video.js库，这会导致元素初始化异常。若不使用Video.js，直接移除这些配置即可。

3. 缺失错误监听逻辑 #

当前代码没有处理HLS加载过程中的错误，无法定位具体问题（比如跨域、分片文件丢失、网络错误等），必须添加错误监听来捕获异常。

4. 自动播放策略限制 #

现代浏览器会阻止无交互的自动播放，需要捕获自动播放失败的错误，提示用户手动触发播放。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS视频播放</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
   <video id="video" controls preload="auto" width="640" height="264"></video>

   <script>
     // 等待DOM加载完成后执行
     document.addEventListener('DOMContentLoaded', function() {
       const video = document.getElementById('video');

       if(Hls.isSupported()) {
         const hls = new Hls();
         hls.loadSource('https://d26g5bnklkwsh4.cloudfront.net/adf856d9-a233-484b-a730-f7ac57c53aa5/master.m3u8');
         hls.attachMedia(video);

         // 清单解析完成后尝试播放
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play().catch(err => {
             console.error('自动播放被浏览器阻止，请手动点击播放按钮');
           });
         });

         // 添加错误监听，定位问题
         hls.on(Hls.Events.ERROR, (event, data) => {
           console.error('HLS加载错误:', data);
           if(data.fatal) {
             switch(data.type) {
               case Hls.ErrorTypes.NETWORK_ERROR:
                 console.log('尝试恢复网络连接...');
                 hls.startLoad();
                 break;
               case Hls.ErrorTypes.MEDIA_ERROR:
                 console.log('尝试恢复媒体播放...');
                 hls.recoverMediaError();
                 break;
               default:
                 console.log('无法恢复的致命错误');
                 video.innerHTML = '<p>视频加载失败，请检查网络或链接有效性</p>';
                 break;
             }
           }
         });
       } 
       // 浏览器原生支持HLS的情况（如Safari）
       else if (video.canPlayType('application/vnd.apple.mpegurl')) {
         video.src = 'https://d26g5bnklkwsh4.cloudfront.net/adf856d9-a233-484b-a730-f7ac57c53aa5/master.m3u8';
         video.addEventListener('canplay', () => {
           video.play().catch(err => {
             console.error('自动播放被浏览器阻止，请手动点击播放按钮');
           });
         });
       } 
       // 不支持HLS的兜底处理
       else {
         video.innerHTML = '<p>你的浏览器不支持HLS视频播放，请更换Chrome、Firefox或Safari重试</p>';
       }
     });
   </script>
</body>
</html>

额外注意事项 #

• 检查m3u8链接的CORS配置：如果CDN未配置跨域允许，浏览器会拦截请求，可在控制台Network面板查看是否有跨域错误。
• 验证m3u8文件有效性：直接访问m3u8链接，检查内容是否正常，以及对应的TS分片文件是否可访问。
• 浏览器兼容性：hls.js支持大部分现代浏览器，IE11及以下不支持，需做好兜底提示。

内容的提问来源于stack exchange，提问作者Afnan Ahmad