hls,js播放流媒体视频有画面没有声音

Question

换其他的播放器就有声音
流媒体
[](http://[2409:8087:5e00:24::1e]:6060/000000001000/5000000004000014694/1.m3u8)
[视频信息]
  视频编码： H264 - 
  输入格式： H264(24 bits)
  输入尺寸： 1920 × 1080(1.78:1)
  输出格式： YV12(12 bits)
  输出尺寸： 1920 × 1080(1.78:1)
  帧率： 25
  BitRate: 未知

[音频信息]
  音频编码： MPEG Audio(0x50) 
  采样率： 48000 -> 48000 Hz
  位率： 0 -> 16 位
  声道数： 2 -> 2 声道
  Bitrate: 128 kbps

 <!-- 添加一个模板，在屏幕的右下方居中的位置 -->
    <div class="template-container"></div>
    <!-- 引入HLS.js库，支持HLS流媒体播放 -->
    <script src="hls.js"></script>
    <!-- 引入ArtPlayer库，用于视频播放 -->
    <script src="artplayer.js"></script>
    <!-- 引入自定义JavaScript文件，用于应用逻辑 -->
    <script src="script.js"></script>
</body>
</html>

art = new Artplayer({
    container: '.artplayer-app',
    url: url,
    isLive: true,  // 启用直播模式
    hotkey: false,  // 关闭快捷键功能
    customType: {
        'm3u8': function(video, url) {
            fetch(url, { redirect: 'follow' })
                .then(response => {
                    if (response.redirected) {
                        const redirectUrl = response.url;
                        console.log('Redirected to:', redirectUrl);
                        if (Hls.isSupported()) {
                            const hls = new Hls();
                            hls.loadSource(redirectUrl);
                            hls.attachMedia(video);
                            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                                video.play();
                            });
                        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                            video.src = redirectUrl;
                            video.addEventListener('loadedmetadata', function() {
                                video.play();
                            });
                        }
                    } else {
                        if (Hls.isSupported()) {
                            const 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();
                            });
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    }
});

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

根据你提供的信息和代码，以下是一些可能的解决方案和步骤，帮助你解决在使用HLS.js和ArtPlayer播放流媒体视频时遇到的问题：

1. 确保音频编码与播放器兼容

• 音频编码：你提到的音频编码是MPEG Audio（MPEG-1 Layer 3），通常以.mp3格式存在。HLS.js和ArtPlayer通常支持这种编码，但有时可能会遇到兼容性问题。
• 解决方案：确保你的HLS.js库是最新版本，因为较新版本可能改进了对不同编码的支持。

2. 检查音频流是否正确加载

• 事件监听：你已经在代码中使用了Hls.Events.MANIFEST_PARSED事件来处理加载后的播放。确保这个事件被正确触发。

• 解决方案：在Hls.Events.MEDIA_ATTACHED事件中添加日志，检查音频流是否被正确加载。

  hls.on(Hls.Events.MEDIA_ATTACHED, function() {
      console.log('Media attached');
  });
  

3. 检查浏览器对MIME类型支持

• MIME类型：确保浏览器支持application/vnd.apple.mpegurl。大多数现代浏览器默认支持，但有时可能需要额外配置。
• 解决方案：尝试在不同的浏览器中测试，或者将视频转换为更通用的格式如MP4。

4. 检查网络请求和重定向

• 网络请求：你的代码中使用了fetch来处理网络请求。确保重定向后的URL是正确的。

• 解决方案：在fetch的.then和.catch中添加更多的日志，以便捕获和处理重定向和错误。

  fetch(url, { redirect: 'follow' })
      .then(response => {
          console.log('Response:', response);
          if (response.redirected) {
              const redirectUrl = response.url;
              console.log('Redirected to:', redirectUrl);
          }
      })
      .catch(error => {
          console.error('Fetch error:', error);
      });
  

5. 调试和日志记录

• 日志记录：在关键步骤添加更多的日志记录，以便更好地理解在加载和播放过程中发生了什么。

• 解决方案：在加载和播放过程中的关键步骤添加console.log。

  console.log('Loading source:', url);
  

6. 测试其他播放器

• 其他播放器：测试其他播放器（如VLC或浏览器内置播放器）是否能够正常播放同一视频流，以确定问题是否仅限于HLS.js和ArtPlayer。
• 解决方案：下载视频文件并在其他播放器中测试，确保问题不是视频源本身的问题。

7. 检查视频源文件

• 视频源文件：检查视频源文件本身是否有问题，例如音频轨道是否缺失或损坏。

• 解决方案：使用视频分析工具（如FFmpeg）来检查视频文件的音频轨道。

  ffmpeg -i input.mp4 -f null -
  

通过以上步骤，你应该能够逐步排查并解决视频没有声音的问题。如果问题仍然存在，可能需要进一步检查HLS.js和ArtPlayer的配置，或者考虑使用其他解决方案。